Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Border properties – CSS


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


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;



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


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


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


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.


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;


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


border property on MDN

Back to: CSS Reference > CSS Properties