CSS Border Property – How to use the border property?
In this article, I am going to discuss CSS Border Property in detail. I hope after reading this article, you will be able to use any kind of border property easily.
List of all CSS Border Properties
- border-style property
- border-width property
- border-color property
- border shorthand property
- border sides
- border-radius property
1. CSS border-style
It is the first property that we use to change the border style of borders.
There are 10 types of border styles given below;
- dashed
- solid
- dotted
- double
- groove
- ridge
- inset
- outset
- none
- hidden
Let’s see, How do we use the border-style property?
<h1> CSS Borders Example </h1><br> <p class="p1"> This Element has dashed border </p><br> <p class="p2"> This Element has solid border </p><br> <p class="p3"> This Element has dotted border </p><br> <p class="p4"> This Element has double border </p><br> <p class="p5"> This Element has groove border </p><br> <p class="p6"> This Element has ridge border </p><br> <p class="p7"> This Element has inset border </p><br> <p class="p8"> This Element has outset border </p><br> <p class="p9"> This Element has none border </p><br> <p class="p10"> This Element has hidden border </p><br>
.p1{border-style: dashed;}
.p2{border-style: dotted;}
.p3{border-style: solid;}
.p4{border-style: double;}
.p5{border-style: groove;}
.p6{border-style: ridge;}
.p7{border-style: inset;}
.p8{border-style: outset;}
.p9{border-style: none;}
.p10{border-style: hidden;}
This is how it will display in your browser.
By default, the color of the border is black. Because we only change the border style not the color of the borders.
2. CSS border-width
The border-width property is used to set the thickness of the borders. So, Let’s see how we use it?
<h1> CSS Example - border-width: 8px; </h1><br> <p class="p1"> This Element has dashed border </p><br> <p class="p2"> This Element has solid border </p><br> <p class="p3"> This Element has dotted border </p><br> <p class="p4"> This Element has double border </p><br> <p class="p5"> This Element has groove border </p><br> <p class="p6"> This Element has ridge border </p><br> <p class="p7"> This Element has inset border </p><br> <p class="p8"> This Element has outset border </p><br> <p class="p9"> This Element has none border </p><br> <p class="p10"> This Element has hidden border </p><br>
p{border-width: 8px;}
.p1{border-style: dashed;}
.p2{border-style: dotted;}
.p3{border-style: solid;}
.p4{border-style: double;}
.p5{border-style: groove;}
.p6{border-style: ridge;}
.p7{border-style: inset;}
.p8{border-style: outset;}
Display in browser.
3. CSS border-color
The border-color property is used to set the color of borders.
So, let’s see the example:
HTML Code
<h1> CSS border-color Property </h1><br> <p class="p1"> This Element has dashed border </p><br> <p class="p2"> This Element has solid border </p><br> <p class="p3"> This Element has dotted border </p><br> <p class="p4"> This Element has double border </p><br> <p class="p5"> This Element has groove border </p><br> <p class="p6"> This Element has ridge border </p><br> <p class="p7"> This Element has inset border </p><br> <p class="p8"> This Element has outset border </p><br> <p class="p9"> This Element has none border </p><br> <p class="p10"> This Element has hidden border </p><br>
CSS Code
p{
border-width: 8px;
border-color: orange;
}
.p1{border-style: dashed;}
.p2{border-style: dotted;}
.p3{
border-style: solid;
border-color: red;
}
.p4{
border-style: double;
border-color: red;
}
.p5{border-style: groove;}
.p6{border-style: ridge;}
.p7{border-style: inset;}
.p8{border-style: outset;}
Result
In the above example, we used three types of color. like, color by HEX value, color name, and RGB value. If you don’t know about color values then visit this link to see: How to Understand and Use CSS Colors?
4. Shorthand property
The easiest way to set the border of an element is by shorthand property. We use this shorthand property to shorten the code. Simply type border property and give all the properties value which you want.
The border property is the shorthand property for the following border properties:
- border-width
- border-style
- border-color
Border-style property is required. Because, if you didn’t add border-style then the border property will not work.
So, let’s see how to use shorthand border property.
HTML code
<h1> CSS border shorthand Property </h1><br> <p class="p1"> some text </p><br> <p class="p2"> some text</p><br> <p class="p3"> some text</p><br> <p class="p4"> some text</p><br> <p class="p5"> some text</p><br> <p class="p6"> some text</p><br>
CSS code
.p1{border: 6px solid red;}
.p2{border: 6px dashed #1767e1;}
.p3{border: 7px solid blue;}
.p4{border: 7px dashed rgb(224, 34, 224);}
.p5{border: 8px dotted brown;}
.p6{border: 8px dotted #000000;}
Result
This is all about CSS borders. I hope you understood well. If you have any questions then feel free to leave a comment below.
Topic: CSS
