Reader Level:
Article

CSS Border Property in HTML: Part I

By Sonia Bhadouria Vishvkarma on Oct 05, 2012
The CSS border properties allow you to specify the style and color of an element's border.

The border shorthand property sets all the border properties in one declaration ie; border-width, border-style, and border-color.

CSS border Property

border:5px solid red;


border-in-HTML.png

 

CSS border-bottom Property

 

border-style:solid;

border-bottom:thick dotted #ff0000;

 

 border-bottom-in-HTML.png


CSS border-bottom-color Property

 

border-style:solid;

border-bottom-color:#ff0000;


border-bottom-color-in-HTML.png

 

CSS border-bottom-style Property

 

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

p {border-style:solid;}

p.none {border-bottom-style:none;}

p.dotted {border-bottom-style:dotted;}

p.dashed {border-bottom-style:dashed;}

p.solid {border-bottom-style:solid;}

p.double {border-bottom-style:double;}

p.groove {border-bottom-style:groove;}

p.ridge {border-bottom-style:ridge;}

p.inset {border-bottom-style:inset;}

p.outset {border-bottom-style:outset;}

</style>

</head>

 

<body>

<p class="none">No bottom border.</p>

<p class="dotted">A dotted bottom border.</p>

<p class="dashed">A dashed bottom border.</p>

<p class="solid">A solid bottom border.</p>

<p class="double">A double bottom border.</p>

<p class="groove">A groove bottom border.</p>

<p class="ridge">A ridge bottom border.</p>

<p class="inset">An inset bottom border.</p>

<p class="outset">An outset bottom border.</p>

</body>

</html>

 

border-bottom-style-in-HTML.png

 

CSS border-bottom-width Property  

 

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

p

{

border-style:solid;

border-bottom-width:15px;

}

</style>

</head>

<body>

 

<p><b>Note:</b> The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

 

</body>

</html>


border-bottom-width.png

 

CSS border-collapse Property

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

table

{

border-collapse:collapse;

}

table, td, th

{

border:1px solid black;

}

</style>

</head>

 

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

</tr>

</table>

<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results

in IE8 and earlier versions.</p>

</body>

</html>

 

border-collapse-in-HTML.png

 

CSS border-color Property
 

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

p.one

{

border-style:solid;

border-color:#0000ff;

}

p.two

{

border-style:solid;

border-color:#ff0000 #0000ff;

}

p.three

{

border-style:solid;

border-color:#ff0000 #00ff00 #0000ff;

}

p.four

{

border-style:solid;

border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);

}

</style>

</head>

 

<body>

<p class="one">One-colored border!</p>

<p class="two">Two-colored border!</p>

<p class="three">Three-colored border!</p>

<p class="four">Four-colored border!</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>

</html>

 

border-color-in-HTML.png

 

CSS border-left Property

 

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

p

{

border-style:solid;

border-left:thick double #ff0000;

}

</style>

</head>

 

<body>

<p>This is some text in a paragraph.</p>

</body>

</html>

 

border-left-in-HTML.png

Here, the border-left Property contains some more properties as shown below:

  • border-left-color-- Property :

    border-left-color:orange;

border-left-color-in-HTML.png
  • border-left-style Property :

    <!DOCTYPEhtml>

    <html>

    <head>

    <styletype="text/css">

    p

    {

    border-style:solid;

    }

    p.none {border-left-style:none;}

    p.dotted {border-left-style:dotted;}

    p.dashed {border-left-style:dashed;}

    p.solid {border-left-style:solid;}

    p.double {border-left-style:double;}

    p.groove {border-left-style:groove;}

    p.ridge {border-left-style:ridge;}

    p.inset {border-left-style:inset;}

    p.outset {border-left-style:outset;}

    </style>

    </head>

     

    <body>

    <class="none">No left border.</p>

    <class="dotted">A dotted left border.</p>

    <class="dashed">A dashed left border.</p>

    <class="solid">A solid left border.</p>

    <class="double">A double left border.</p>

    <class="groove">A groove left border.</p>

    <class="ridge">A ridge left border.</p>

    <class="inset">An inset left border.</p>

    <class="outset">An outset left border.</p>

    </body>

    </html>


     

border-left-style-in-HTML.png
  • border-left-width Property :

    border-left-width:15px;

border-left-width-in-HTML.png

Summary

 

Using this article we are able to give a nice look & feel to our Web-Page.

COMMENT USING