CSS Borders

In this tutorial we will learn about CSS Borders. CSS Borders are use to set Border around HTML elements. In CSS we set set Border style, Border thickness, Border color etc. In this tutorial we will learn several CSS properties to set HTML element border.

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

Border Style:

Border style properties is use to set style of border there are several border styles available in CSS. Check the list of CSS Border style:

dotted: This style is use to set a dotted border style around HTML element.

p{border-style: dotted;}

This is a dotted border style.


solid: This style is use to set solid border style around HTML element.

p{border-style: solid;}

This is a solid border style.


dashed: This style is use to set dashed border style around HTML element.

p{border-style: dashed;}

This is a dashed border style.


groove: This style is use to set groove border style around HTML element.

p{border-style: groove;}

This is a groove border style.


hidden: This style is use to set hidden border style around HTML element.

p{border-style: hidden;}

This is a hidden border style.


inset: This style is use to set inset border style around HTML element

p{border-style: inset;}

This is a inset border style.


outset: This style is use to set outset border style around HTML element.

p{border-style: outset;}

This is a outset border style.


none: This style is use to set none border style around HTML element.

p{border-style: none;}

This is a none border style.


ridge: This style is use to set ridge border style around HTML element.

p{border-style: ridge;}

This is a ridge border style.


double: This style is use to set double border style around HTML element.

p{border-style: double;}

This is a double border style.


CSS Border Width:

CSS border-width property is use to define width of border. you can define border-width in px, pt, cm, em etc.

p{ border-width: 5px;}

CSS Border color:

CSS border-color property is use to define color of border. you can define border-color using standard_color, Hexa value, rgb value etc.

p{ background-color: red;}
Spread the love