CSS Reference Guide: border

The CSS border property is a shorthand used to set the border width, style, and/or color of an element’s border.

Jump ahead:

• Syntax
• Component properties
  • border-color
  • border-style
  • border-width

---

An element in CSS is represented by the box model.

Above, you can see that the border of an element is just one or more lines that surround the element’s content and padding. An element’s border does not extend into the margins because the element’s content stops at its padding. Consider an example:

border: 1px solid green;

This will set the targeted element’s border width to be 1px, its border appearance to be solid, and its color to be green.

See the Pen
css borders example by Chidume David (@philipsz-davido)
on CodePen.

---

Syntax

The normal syntax of border is:

border: <border-width> <border-style> <border-color>;

Some values can be omitted in border, which will force the CSS engine to assign initial values.

One value:

border: <border-style>

If border is assigned only a single value, it must be the <border-style>; the border will be invisible if it is not defined. CSS will then take the initial values of the border width (medium) and color (currentcolor). The width is computed to be around 3px, and the color will be the text color or the foreground color of the element.

border: solid;

Here, the border style is solid. CSS will then set the border width to medium, which is 3px, and set the color to be black (rgb(0, 0, 0);), which is the default color of an element if it has no color set on itself or if it has no inherited color from its parent element. That’s why we will see a black border of 3px appear around the element.

border: solid;
color: red;

Above, we set the color of the element to be red. The border will be 3px wide, solid-styled, and red in color. As we can see, the color of the element, or the inherited color from its parent element, affects the color of the element’s border color if it is not set.

---

Two values:

border: <border-width> <border-style>

This syntax sets the width and style of the border. CSS will then compute the color of the border from the element’s color property or its inherited color property.

border: 9px dotted;

The element will have a border width of 9px, and the border appearance will be dotted. The border color will then be the color of the element or its inherited color. As discussed above, CSS sets the default color to black in the absence of a set/inherited color property.

color: green;
border: 9px dotted;

In this case, we have a color property set on the element to be green. The border color of the element will then be green in color.

border: <border-style> <border-color>

The above syntax has only the border style and color explicitly set. CSS will compute and set the border-width to be medium, which is approximately 3px wide.

border: solid red;

This sets the border style and color of an element to be red in color and 3px wide.

---

Component properties

Whenever we use the sole border shorthand property, we are setting three CSS border properties.

• border-color
• border-style
• border-width

border-color

This property sets the border color of an element.

border-color: red;

The border color is set to red.

border: 9px solid;
border-color: red;

The first rule sets the width and style, and the color is computed by CSS to be black, the default text color of the element. border-color then informs CSS to disregard the default text color and instead use its value of red.

So we have a solid, red-colored border of 9px wide on the element.

border-color has single-side computed properties:

• border-top-color
• border-bottom-color
• border-right-color
• border-left-color

If they are not defined individually, they will all take the value of border-color.

---

border-style

This property styles the appearance of the border. It can take the following 10 values:

• none: There will be no border on the element, even if the border width and color are set
• hidden: Equivalent to none, but it has a slightly different effect when applied to tables
• dotted: Assigns a dotted border
• dashed: Assigns a dashed border
• solid: Assigns a solid, unbroken border
• double: Assigns a double border. The lines’ width, and the width of the space between them, are equal to the value of border-width
• groove: Assigns a 3D grooved border, which appears as though it were chiseled/engraved
• ridge: Assigns a 3D ridged border, which appears as though it has ridges cut out at the edges
• inset: The top and left sides of the border will be darker in color, and the bottom and left sides will be lighter in color
• outset: The reverse of inset; the bottom and left sides of the border are darker in color, while the right and top sides are lighter

border-style also has single-side computed properties:

• border-top-style
• border-bottom-style
• border-left-style
• border-right-style

If they are not defined individually, they will all take the value of border-style.

Setting multiple styles

We can set multiple styles on an element’s border by using the single-side properties of border-style. Its syntax is:

border-style: <top> <right> <bottom> <left>

Values are assigned as follows:

//one value:
border-style: <top, bottom, right, left>

//two values:
border-style: <top, bottom> <right, left>

//three values:
border-style: <top> <right, left> <bottom>

Here’s an example:

border-style: solid dotted

This sets the style of the top and bottom portions of the border to be solid and sets the left and right sides to be dotted.

border-style: solid dotted dashed

This sets the top to be solid, the bottom to be dashed, and the left and right sides to be dotted.

---

border-width

This property sets the width of the border. It can accept the following values:

• <length>: This is the value of the border width explicitly set by the user. It can be of any unit: px, em, pt, etc.
• thin: ~1px
• medium: ~3px
• thick: ~5px

Note: CSS does not define exact values for the keywords above; their results may vary by implementation.

border-width has single-side computed properties as well:

• border-top-width
• border-bottom-width
• border-left-width
• border-right-width

If they are not defined individually, they will all take the value of border-width.