CSS and Borders

css CSS and Borders Border Properties Css

Border Properties

The important properties that are used to change the borders are as follows:

•border-width •border-color •border-style

Above three properties can be used together by using border attribute.

Example


<html>
<body>
<p style="border: 3px violet solid;"> 3px is border width.
violet is  border color.
solid is border style.</p>
</body>
</html>

In above example all three values are seprated with space. 3px indicates the width,violet indicates the color and solid indicates the style of the border.

Parts of Border

There are four parts to each border:

•border-top •border-bottom •border-left •border-right

The above four properties can be used to display each side of the border differently.

Example


<html>
<head>
	<style type="text/css">
	p{border: 3px dashed green;}
	b{ border-top-style: solid; border-top-color: red;
	  }
	  i{border-bottom-style:dotted; border-bottom-color: blue; }
	  u{border-left-style: solid; border-left-color:red;}
	</style>
</head>
<body>
<p>paragraph border</p>
<b>bold text with border.....</b><br>
<i>italic text with border.....</i><br>
<u>underlined text with border...</u>
</body>
</html>

Border Style

There are eight possible styles for border which are shown in following example .

<html>
<head>
<style type="text/css">
p.dashed{border-style:dashed;}
p.solid{border-style:solid;}
p.dotted{border-style:dotted;}
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>
</head>
<body>
	<p class="dashed">Border style can be specified as <b>dashed</b></p>
<p class="solid">Border style can be specified as <b>solid</b></p>
<p class="dotted">Border style can be specified as <b>dotted</b></p>
<p class="double">Border style can be specified in <b>double</b></p>
<p class="groove">Border style can be specified in <b>groove</b></p>
<p class="ridge">Border style can be specified in <b>ridge</b></p>
<p class="inset">Border style can be specified in <b>inset</b></p>
<p class="outset">Border style can be specified in <b>outset</b></p>
</body>
</html>

Border Width

Border width can be specified in pixels or one of the standard values thin,medium and thick.

Border width property can always use with "border-style" property otherwise it does not work. Example

<html>
<head>
	<style type="text/css">
		p.thick{border-width: thick; border-style:solid;}

		p.thin{border-width: thin;border-style:double}
		p.medium{border-width: medium;border-style:ridge;}
		p.pixel{border-width:10px; border-style:outset;}
	</style>
</head>
<body>
<p class="thick">Border width can be specified as <b>thick</b></p>
<p class="thin">Border width can be specified as <b>thin</b></p>
<p class="medium">Border width can be specified as <b>medium</b></p>
<p class="pixel">Border width can be specified in <b>pixels</b></p>
</body>
</html>

Border Color

The border color property is used to specify the color of border.

Example

<html>
<head>
	<style type="text/css">
			p{border-width:10px;border-color:green; border-style:double;}
	</style>
</head>
<body>
<p>Border color can be specified as <b>green</b></p>
</body>
</html>

css Border Properties Css Chapter Next »