HOLLA TECH - LEARN

The border Property
 

The CSS border property allows you to customize the borders of HTML elements.
In order to add a border to the element, you need to specify the size, style, and color of the border.
The example below shows how to add a solid green border to the paragraph.

The HTML: 

<p>This is an example of a solid border.</p>

 

The CSS: 

p {
   padding: 10px;   
   border: 5px solid green;
}

 

Result: 

Holla Tech - Learn CSS


Border Width
 

The properties for the border can be set separately. The border-width property specifies the width of the border.

The HTML:

 

<p class=“first”>
    Border width of this paragraph is set to 2px.
</p>
<p class=“second”>
    Border width of this paragraph is set to 5px.
</p>

 

The CSS: 

p.first {
   padding: 10px;   
   border-style: solid;
   border-width: 2px;
}
p.second {
   padding: 10px;   
   border-style: solid;
  border-width: 5px;
}

 

Result: 

Holla Tech - Learn CSS


 Border Color

The border color of the element can be defined using a color name, RGB, or Hex values.
The HTML:

<p class=“first”>
   Border color has been created using <strong>color name.</strong>
</p>
<p class=“second”>
   Border color has been created using <strong>Hex values.</strong>
</p>
<p class=“third”>
   Border color has been created using <strong>RGB values.</strong>
</p>

 

The CSS: 

p.first {
   padding: 10px;
   border-style: solid;
   border-width: 2px;
   border-color: blue;
}
p.second {
   padding: 10px;   
   border-style: solid;
   border-width: 2px;
   border-color: #FF6600;
}
p.third {
   padding: 10px;   
   border-style: solid;
   border-width: 2px;
   border-color: rgb(0, 153, 0);
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
None of the border properties will have any effect unless the border-style property is set.

The border-style Property
 

The default value of border-style is none, which defines no border.
There are various styles supported for the border-style property: dotted, dashed, double, etc. The example below illustrates the differences between them.

The HTML:

<p class=“none”>This paragraph has no border.</p>
<p class=“dotted”>This is a dotted border.</p>
<p class=“dashed”>This is a dashed border.</p>
<p class=“double”>This is a double border.</p>
<p class=“groove”>This is a grooved border.</p>
<p class=“ridge”>This is a ridged border.</p>
<p class=“inset”>This is an inset border.</p>
<p class=“outset”>This is an outset border.</p>
<p class=“hidden”>This is a hidden border.</p>

 

The CSS: 

p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}

 

Result: 

Holla Tech - Learn CSS

NOTE!
In CSS, it is possible to specify different borders for different sides, using the following properties: border-top-style, border-right-style, border-bottom-style, and border-left-style for the corresponding sides.

 

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT