CSS Border - Learn All the Basics!

 

In CSS, border properties are used to draw a line around the object and text to improve the appearance.

We can add a variety of borders by using three properties

  border : 1px solid red; /* width, style, color */

• border - width
• border - style
• border - color

1. Border - width:

It allows you to set the thickness of a line to your border. It accepts a value in px, em, rem, vh and vw units, also you can use pre-defined values - thin, medium and thick. 

It has also four following properties, allowing you to specify different values to set the different widths. 

  border-width : border-top-width, border-right-width, border-bottom-width, border-left-width
  

In short-hand border-width property, your specified value will follow the rules -

  border-width : one-value; /* it set one value to all side of border */
  
  border-width : top-bottom right-left; /* ex: 2px 4px */
  
  border-width : top right-left bottom; /* ex: thin medium thick */
  
  border-width : top right bottom left; /* ex:.5rem 1em .5rem 1em */
  

Note: use this property with style property.

2. Border - style:

This property allows you to style your element's border, it can be solid, dotted, dashed, etc.

You should apply the style to your border to work with other border properties.

border style value - 

 border-style : solid; dashed; dotted; double; groove; ridge; inset; outset; hidden; none;
 

It has also four following properties, allow you to specify different styles - 

 border-style : border-top-style, border-right-style, border-bottom-style, border-left-style
 

These short-hand style values will follow the following rules.

 border-style : one-value; /* it set one style to all side of border */
 
 border-style : top-bottom right-left; /* ex: groove ridge */
 
 border-style : top right-left bottom; /* ex: none double solid */
 
 border-style : top right bottom left; /* ex: groove inset ridge outset */
 

3. Border - color:

This property allows you to give a color to your element's border. The value can be the direct color name, hex value, RGB code, hsla and transparent.

You can also specify the different colors on to the side of your border with these properties. 

 border-color : border-top-color, border-right-color, border-bottom-color, border-left-color
 

These short-hand color values will follow the following rules. 

 border-color : one-value; /* ex: red; it will apply to all side of your border */
 
 border-color : top-bottom right-left; /* ex: #ff0000 #0000ff */
 
 border-color : top right-left bottom; /* ex: rgb(0,0,255) rgb(176,196,222) rgb(0,0,0) */
 
 border-color : top right bottom left; /* ex: red blue green yellow */
 

Note: Use this property with style property 

If you want to set one side border with all short-hand properties, you can use border-top, border-right, border-bottom and border-left.

Example -

 border-top : 4px solid red
 border-left : 4px dashed  yellow; 
 border-bottom : 1em dotted pink; 
 border-left : .5rem solid blue; 
 
 

Related topic -

🔗 All CSS border properties code example