CSS Border

By using the various commands of CSS, you can set the colors, width, style and many different properties of the borders.

Width of the border

The width of the borders can be specified by using the property, border-width. The value is specified in terms of pixels or keywords. The keywords that can be used are thin, medium or thick. The ways to specify the border width are given below:

p.oneb {border-width: 5px}
p.twob {border-width: thick thin}
p.threeb {border-width: 5px 10px 2px}
p.fourb {border-width: 5px 10px 1px medium}

The above borders will look as follows:

This defines width of all borders

Top, bottom borders will be thick & right, left borders will be thin

Top will be 5px, right & left 10px, bottom will be 2px

Top will be 5px, right 10px, bottom 1px & left medium

Styles of the border

There are various types of borders that can be used. By using the border-style property, various types of border styles can be displayed. The various types of borders that can be set are given below:

span.solid {border-style: solid} 
span.double {border-style: double} 
span.groove {border-style: groove} 
span.dotted {border-style: dotted} 
span.dashed {border-style: dashed} 
span.inset {border-style: inset} 
span.outset {border-style: outset} 
span.ridge {border-style: ridge} 
span.hidden {border-style: hidden}

The result of these border styles are given below:

This is solid border

This is double border

This is grooved border

This is dotted border

This is dashed border

This is inset border

This is outset border

This is ridged border

This is hidden border

You can specify different styles for different borders.
Example:

<html>
<head>
<style type="text/css">
p.two {border-style: dotted double}
p.three {border-style: groove solid dotted}
p.four {border-style: groove double dashed solid}
</style>
</head>

<body>
<p class="two">Top and bottom are dotted while left and right are double
</p>
<p class="three">Top is grooved, right and left are solid while bottom is
dotted</p>
<p class="four">Top is grooved, right is double, bottom is dashed and left
is solid</p>
</body>
</html>

Output:

Top and bottom are dotted while left and right are double

Top is grooved, right and left are solid while bottom is dotted

Top is grooved, right is double, bottom is dashed and left is solid

Color of the border

The color of the border is set by using the border-color property. The value of the border-color property can be a color name, rgb value or a hexadecimal number.
Example:

<html>
<head>
<style type="text/css">
div.one {border-style: solid; border-color: #0000ff}
div.two {border-style: solid; border-color: #ff0000 #0000ff}
div.three {border-style: solid; border-color: #ff0000 #00ff00 blue}
div.four {border-style: solid; border-color: #ff0000 black #0000ff
rgb(250,0,255)}
</style>
</head>

<body>
<div class="one">Border is single colored</div>
<div class="two">Top & bottom #ff0000, right & left #0000ff</div>
<div class="three">Top #ff0000, right & left 00ff00, bottom blue</div>
<div class="four">Top #ff0000, right black, bottom #0000ff, left
rgb(250,0,255)</div>
</body>
</html>

Output:

Border is single colored
Top & bottom #ff0000, right & left #0000ff
Top #ff0000, right & left 00ff00, bottom blue
Top #ff0000, right black, bottom #0000ff, left rgb(250,0,255)

Some other commands

border-top The border-top allows to set various properties of the top border in a single declaration.
border-right You can set all the properties of the right border by using border-right.
border-bottom All the properties of the bottom border can be set by using a single declaration, border-bottom.
border-left The bottom-left allows to set all the properties of the left border.
Example:

<html>
<head>
<style type="text/css">
span.top {border-top: thick dotted rgb(250,0,255);
border-right: thick solid green;
border-bottom: thin dashed red;
border-left: medium groove blue}
</style>
</head>

<body>
<span>All the properties are specified in a single declaration.</span>
</body>
</html>

Output:

All the properties are specified in a single declaration.

border-top-color The color of the top border is specified by using border-top-color.
border-right-color The color of the right border is specified by using border-right-color.
border-bottom-color The color of the bottom border is specified by using border-bottom-color.
border-left-color The color of the left border is specified by using border-left-color.
Example:

<html>
<head>
<style type="text/css">
div 
{
border-style: solid;
border-top-color: #ff0000;
border-right-color: green;
border-bottom-color: black;
border-left-color: rgb(250,0,255)
}
</style>
</head>

<body>
<div>The colors of all the borders are specified.</div>
</body>
</html>

Output:

The colors of all the borders are specified.

border-top-style The style of the top border can be specified by using border-top-style.
border-right-style The style of the right border is specified by using border-right-style.
border-bottom-style The style of the bottom border is specified by using border-bottom-style.
border-left-style The style of the left border can be specified by using border-left-style.
Example:

<html>
<head>
<style type="text/css">
p.style
{
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: groove;
border-left-style: ridge
}
</head>

<body>
<p class="style">This paragraph has styles of all borders specified</p>
</body>
</html>

Output:

This paragraph has styles of all borders specified

border-top-width The width of the top border is specified by using border-top-width.
border-right-width The width of the right border is specified by using border-right-width.
border-bottom-width The width of the bottom border can be specified by using border-bottom-width.
border-left-width The width of the left border is specified by using border-left-width.
Example:

<html>
<head>
<style type="text/css">
p.width
{
border-style: solid;
border-top-width: 15px;
border-right-width: medium;
border-bottom-width: 5px;
border-left-width: thick
}
</style>
</head>

<body>
<p class="width">This paragraph has the width of all the borders specified
</p>
</body>
</html>

Output:

This paragraph has the width of all the borders specified

border By using border, all the properties of the border can be set by using a single command.
Example:

<html>
<head>
<style type="text/css">
div.border {border: solid 2px green}
</style>
</head>

<body>
<div class="border">The properties have been specified in a single command
</div>
</body>
</html>

Output:

The properties have been specified in a single command

CSS Tutorial

CSS Border

Width of the border

Styles of the border

Color of the border

Some other commands

'w3reference : Learn by examples ... Advanced to beginner's tutorials ...'