Border properties - CSS

Demo

Some padding was added to these examples to more clearly show the borders.

Summary

To change the border of an element using CSS, use the border-width, border-style, border-color, and border-radius properties:

selector {
  border-width: 1px;
  border-style: solid;
  border-color: red;
  border-radius: 4px;
}

You can also use the border property, which combines the first three properties from above into one:

selector {
  border: 1px solid red;
  border-radius: 4px;
}

Details

border-width

The border-width property takes a length value. Smaller values result in thinner borders while larger values result in thicker borders.

border-style

The border-style property can have the following values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset.

border-color

The border-color property takes any color value (hex, RGB, HSL, or keyword).

border

When using the border property, the order of the values doesn’t matter. However, it’s best to be consistent with the order across your CSS files for better readability.

border-radius

The border-radius property takes a length value. Larger values result in more rounded corners.

More specific border properties

To target a specific side, add the words top, bottom, left, or right to the border property (separated by a dash), like this:

selector {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
  border-right: 1px solid red;
}

If you only want to change a specific border property on a specific side, you can add the words top, bottom, left, or right in the middle of the border-width, border-style, and border-color properties (separated by dashes). For example, here’s how you can change the border colors of each side individually:

selector {
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: red;
  border-right-color: red;
  border-bottom-color: red;
  border-left-color: red;
}

To change the border radius of a particular corner, use the border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties.

selector {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

Exercises

First, recreate the CSS code from the Demo section in your CSS file. Then try changing the values for the properties.

References

border property on MDN

Border properties – CSS