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.
Page Contents
- 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;}
Parvesh Sandila is a results-driven tech professional with 8+ years of experience in web and mobile development, leadership, and emerging technologies.
After completing his Master’s in Computer Applications (MCA), he began his journey as a programming mentor, guiding 100+ students and helping them build strong foundations in coding. In 2019, he founded Owlbuddy.com, a platform dedicated to providing free, high-quality programming tutorials for aspiring developers.
He then transitioned into a full-time programmer, where his hands-on expertise and problem-solving skills led him to grow into a Team Lead and Technical Project Manager, successfully delivering scalable web and mobile solutions. Today, he works with advanced technologies such as AI systems, RAG architectures, and modern digital solutions, while also collaborating through a strategic partnership with Technobae (UK) to build next-generation products.