Home » Learn Code » CSS3 » CSS Border Property – How to use the border property?

CSS Border Property – How to use the border property?

  • CSS3
  • 5 min read
CSS Borders

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

  1. border-style property
  2. border-width property
  3. border-color property
  4. border shorthand property
  5. border sides
  6. 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 we use 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.

css border styles property

By default, the color of 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.

width property

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

border color property

In the above example, we used three types of colour. like, colour by HEX value, colour name, RGB value. If you don’t know about colour 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.

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

shorthand property

This is all about css borders. I hope you understood well.

Leave a Reply

Your email address will not be published. Required fields are marked *