CSS: CSS Border - Learn CSS for Free and Fun

By: Unknown 0 comments

What we can do with CSS Border?

 We can set the color of the border
 We can set the style of the border
 We can set the width of the border

The CSS border is used for the purpose of changing color, style and the width of the border.
The CSS border allows to use each side of the separately from the other three sides. Each of
the sides can have different color, style and width.

The color of the border also has different syntaxes for the top, bottom, left and right. To set the color of four borders the syntax used is

<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>

The style of the CSS border varies in case of top, bottom, right and left borders. The syntax used in case of dotted, dashed, solid, double, groove, ridge, inset, outset paragraphs are

<style type="text/css">
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
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;}
</style>

The width of the CSS border also varies in case of top, bottom, right and left. To set the width
of the bottom border the syntax used is

<style type="text/css">
p.one {
border-style: solid;
border-top-width: 15px;
}
p.two {
border-style: solid;
border-top-width: thin;
}
</style>