How to Use Border in CSS

The border in CSS outputs the border of an HTML element. It also defines the color, thickness, border style, etc. See the following examples for more clarifications:

This element has a 1px solid black border from all sides.

border: 1px solid black;

I have a 3px dotted green border at the bottom.

border-bottom: 3px dotted green;

This element has 2px solid gray border with 10px rounded corner.

 border: 2px solid gray;
 border-radius: 10px;

I have a 5px solid orange border at the right side.

How the border in CSS works

See the following rules to define the borders.

border: {border-width} {border-style} {border-color}

Border width

It defines the width of the border. For example 1px, 5px, 10px, etc. Also, you can also use other units such as rem, em, cm. But the “px” (pixel) is mostly used.

Border style

It defines the style of the border. For example solid, dotted, dashed, double, etc.

Border color

It defines the color of the border such as black, green, yellow, etc. You can also use hex colors such as #0097D7, #F74D3F, etc. And even you can use RGBA colors, such as:

border-right: 5px solid rgba(127, 17, 224, 0.7);

Border directions

You can assign a border to all four directions or any sides you like. See the following example:

  border: /* border in all 4 direction */
  border-top: /* border top */
  border-right: /* border right */
  border-bottom: /* border bottom */
  border-left: /* border left */

Different width value in borders

You can also assign different width values in different directions. And even it’s just not limited to the ‘Width’ value but also for other properties. See the following example for more clarifications:

Different values in borders.

  border-top: 5px solid green;
  border-right: 10px solid red;
  border-bottom: 15px dotted blue;
  border-left: 20px double yellow;

Border radius

The radius defines the rounded corners of the border.

It has a 5px border radius in the four directions.

 border: 5px solid green;
 border-radius: 5px;

I have different border radius in different directions.

 border: 5px solid green;
 border-radius: 5px 10px 20px 40px;

Above border radius means 5px on top-left, 10px on top-right, 20px on bottom-right, 40px on bottom-left.

Round border CSS

50% radius makes a round border. But if you want to make a circle then make sure the element has a equal width & height (square size).

border: 5px solid green;
border-radius: 50%;

I hope the above explanation & examples have given you a solid grasp of the border in CSS. Though if you still have any questions, feel free to ask.