Reader Level:
ARTICLE

CSS Border Property in HTML: Part I

Posted by Sonia Bhadouria Vishvkarma Articles | JavaScript October 05, 2012
The CSS border properties allow you to specify the style and color of an element's border.
  • 2
  • 0
  • 4822

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

Trending up