CSS Borders

CSS Borders

Borders in CSS are used to create lines around HTML elements. They can be styled in various ways using properties such as width, color, and style. Borders help visually separate content, create boxes, and enhance UI design.

Border Properties in CSS

CSS provides the following properties to control borders:

• border: A shorthand to define width, style, and color.
• border-width: Specifies the thickness of the border.
• border-style: Defines the type of border (e.g., solid, dashed).
• border-color: Sets the color of the border.
• border-radius: Rounds the corners of the border.

Example: Basic CSS Border Styles

Border Shorthand Property

The border shorthand lets you define all three main border properties at once:

This is equivalent to:

Border Radius

To create rounded corners, use the border-radius property:

You can also control each corner individually:

Key Takeaways

• The border property defines the width, style, and color of an element's border.
• Common border styles include: solid, dashed, dotted, double, groove, ridge, inset, outset, and none.
• border-radius is used to round the corners of elements.
• Borders can be applied to all four sides or individually (border-top, border-right, etc.).
• The border shorthand makes it easier to apply multiple properties at once.