CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element’s border.

Border Width

The border-width property specifies the width of the four borders. The property can have from one to four values.

div {  border-width: 10px;}

In this example, all four borders will be 10px wide.

Border Style

The border-style property specifies what kind of border to display. The property can have from one to four values (solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden).

div {  border-style: solid;}

In this example, all four borders will be solid.

Border Color

The border color property sets the color of an element’s four borders. The property can have from one to four values.

div {  border-color: red;}

In this example, all four borders will be red.

Border — Individual Sides

You can set the border on individual sides of an element:

Get Devwares’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
div {  border-left: 6px solid red;  border-right: 6px solid blue;}

In this example, the element will have a 6px solid red border on the left side and a 6px solid blue border on the right side.

Shorthand Property: border

The border property is a shorthand property for border-width, border-style (required), border-color.

div {  border: 5px solid red;}

In this example, all four borders will be 5px wide, solid and red.

Border Radius

The border radius property is used to add rounded borders to an element:

div {  border: 2px solid;  border-radius: 25px;}

In this example, the element will have a 2px solid border with a 25px radius, making it rounded.

Border Collapse

The border-collapse property is specifically used for table elements. It controls how table borders collapse into a single border when adjacent cells have borders:

• collapse: Borders collapse into a single border (default behavior).
• separate: Borders remain separate.

table {
  border-collapse: collapse; /* Borders collapse into one */
}

Border Spacing

The border-spacing property sets the space between adjacent cell borders in a table:

table {
  border-spacing: 10px; /* Space between cell borders */
}