What is the Box Model in CSS

The border is not visible by default, but that can be changed by setting the border-style property.

p {
  border-style: solid;
}

Other possible values for border-style include:

Try these options in the playground and pay extra attention to none and hidden.

They are visually the same, but you should be careful not to misuse them.

none indicates the element has no border at all, and hidden indicates that the element does have a border, just not visible.

This small difference is crucial because the border itself has thickness, and if not calculated correctly, it might lead to problems when sizing elements.

Customizing border width, color, and radius

You can further customize the border by setting its width, color, and radius:

p {
  border-style: solid;
  border-width: 4px;
  border-color: red;
  border-radius: 10px;
}

The border-width property accepts either numeric values such as 2px, 1rem, and 0.25em, or keyword values such as thin, medium, and thick.

The border-color property defines the border color using the same methods we discussed in the CSS colors lesson.

And finally, the border-radius property defines the radius to create a rounded border. It accepts either length values or percentage values.

To make the border completely rounded, you can set the border-radius to larger than or equal to 50%:

p {
  border-style: solid;
  border-width: 4px;
  border-color: red;
  border-radius: 60%;
}

Customizing individual borders

Besides the properties discussed above, there are also properties that allow you to customize individual sides of the border:

p {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: double;
  border-left-style: dashed;
}

Similar variants also exist for border-width, border-color, and border-radius.

If you want a simpler syntax, use the border-style property mentioned above, and pass multiple values. This allows you to customize each individual sides.

The syntax is as follows:

border-style: <top> <right> <bottom> <left>;
border-style: <top> <left_and_right> <bottom>;
border-style: <top_and_bottom> <left_and_right>;
border-style: <all>;

Once again, the same pattern holds for border-width, border-color, and border-radius.

The border shorthand

Lastly, CSS offers an ultimate shorthand property, border, which allows you to customize width, style, and color together.

p {
  border: 2px dashed red;
}

However, you cannot customize individual sides with this property.