How to use the border in CSS?

The border in CSS outputs the border of an HTML element. It also defines the color, thickness, border style, etc. In this post, I will take you from the very basic to the deep level of borders.

How to create a border?

To create a border, you need to declare 3 mandatory things:

1. Width of the border (e.g. 1px, 5px, 7em, 10rem, etc.)
2. Type of the border (e.g. solid, dotted, double, etc.)
3. Color of the border (e.g. red, green, #222222, etc.)

I will discuss more on these (later in this post).

See the following examples for more clarification:

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 a 2px solid gray border with a 10px rounded corner.

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

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

How does the border work?

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 side 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 values 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 clarification:

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;

The above border-radius means 5px on the top-left, 10px on the top-right, 20px on the bottom-right, and 40px on the bottom-left.

Round border CSS

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

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

However, if you need to create a rounded table, only the border-radius won’t work. So keep that in mind. See this other post to learn how to do it.

Conclusion

I hope all these explanations & examples gave you a solid grasp. Though if you still have any questions, feel free to ask.