CSS Border

border, a CSS feature, is used to specify and shape the frame of HTML elements.

border: 1px solid #000; 
/* or */ 
border: 1px solid rgb(0,0,0);

In the border property, the thickness (1px), style (solid) and color of the HTML element are specified, respectively.

The above usage is the shorthand CSS version of the border property, its thickness, style and color can also be specified separately as follows.

border-width: 1px; 
border-style: solid; 
border-color: #000;

Apart from this usage, the thickness, style, and color of each corner can also be specified separately. For example, the border-right-width: property can be used to specify the thickness of the right side.

border: 1px solid #000; Its structure is the simplest way to use the border feature, when used in this way, all the other CSS properties below are applied.

CSS border-width

The border-width property in CSS specifies the thickness of the borders around an element.

<style> 
.box { 
  width: 40%; 
  height: 50px; 
  padding: .5rem; 
  border-width: 4px;
  border-style: solid;
  border-color: #000;
} 
</style> 

<div class="box">Lorem ipsum dolor.</div>

Different Width for Each Border

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

<style> 
.box { 
  width: 40%; 
  height: 50px; 
  padding: .5rem; 
  border-top-width: 1px; 
  border-right-width: 2px; 
  border-bottom-width: 3px; 
  border-left-width: 4px;
  border-style: solid;
  border-color: #000;
} 
</style> 

<div class="box">Lorem ipsum dolor.</div>

CSS border-style

• border-style: solid;
• border-style: dashed;
• border-style: dotted;

Border Solid

Border Dashed

Border Dotted

Border Double

border-style:double appear with more than 2px border-width.

CSS border-radius

The border-radius property in CSS is used to add rounded corners to elements. It can give a softer and more aesthetic appearance to traditionally sharp-cornered boxes. This can be especially useful for creating button designs, card elements, avatars, and other user interface components that benefit from a more rounded look.

<style> 
.box { 
  width: 40%; 
  height: 50px; 
  padding: .5rem; 
  border: 1px solid #000; 
  border-radius: 10px;
} 
</style> 

<div class="box">Lorem ipsum dolor.</div>

Border Radius for Each Corner

/* top-left-and-bottom-right | top-right-and-bottom-left */
.box {
    border-radius: 10px 20px;
}

/* top-left | top-right-and-bottom-left | bottom-right */
.box {
    border-radius: 10px 20px 30px;
}

/* top-left | top-right | bottom-right | bottom-left */
.box {
    border-radius: 10px 20px 30px 40px;
}

Create a Circle or Ellipse Using Border Radius

If you have a square element and you apply a border-radius of 50%, you’ll get a circle. If the element is rectangular, you’ll get an ellipse.

/* Circle */
.box {
    border-radius: 50%;
    width: 90px;
    height: 90px;
}

/* Ellipse */
.box {
    border-radius: 50%;
    width: 90px;
    height: 45px;
}