CSS Borders


In this tutorial, we will learn about CSS Borders. CSS Borders are used to set Border around HTML elements. In CSS we set Border style, Border thickness, Border colour etc. Here we will learn several CSS properties to set border of any HTML element.

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

Border Style:

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

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

p{border-style: dotted;}

solid: This style is used to set a solid border style around the HTML element.

p{border-style: solid;}

dashed: This style is used to set a dashed border style around the HTML element.

p{border-style: dashed;}

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

p{border-style: groove;}

hidden: This style is used to set a hidden border style around the HTML element.

p{border-style: hidden;}

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

p{border-style: inset;}

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

p{border-style: outset;}

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

p{border-style: none;}

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

p{border-style: ridge;}

double: This style is used to set a double border style around the HTML element.

p{border-style: double;}

CSS Border Width:

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

p{ border-width: 5px;}

CSS Border colour:

CSS border-colour property is used to define the colour of the border. you can define border-color using standard_color, Hexa value, RGB value etc.

p{ background-color: red;}

 



Spread the love:

Please share this page on social media with your friends..

Facebook share Twitter Linkedin share




Great News! Now you can read all the tutorials on our Android App..

Download Owlbuddy: Learn Programming Tutorials App Now.

Download Owlbuddy: Learn Programming Tutorials