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;}