CSS BOX MODEL-Borders
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
1.Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent.
2.Border - A border that goes around the padding and content. The border is inherited from the color property of the box.
There are three properties of a border :
A. border-color: it specifies the color of a border.you can change
the color of the bottom, left, top and right sides of an element's border using the properties:
I)border-bottom-color: It changes the color of bottom border.
II)border-top-color: It changes the color of top border.
III)border-left-color: It changes the color of left border.
IV)border-right-color: It changes the color of right border.
B. border-style: it specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
The border-style property allows you to select one of the following styles of border:
• none: No border. (Equivalent of border-width:0;)
• solid: It is a Border with single solid line.
• dotted: It is a Border with series of dots.
• dashed: It is a Border with series of short lines.
• double: It is border with two solid lines.
• groove: It is border looks as though it is carved into the page.
• ridge: It is a border looks the opposite of groove.
• inset: It is a border makes the box look like it is embedded in the page.
• outset: It is a border makes the box look like it is coming out of the canvas.
• hidden: Same as none, except in terms of border-conflict resolution for table elements.
You can individually change the style of the bottom, left, top, and right borders of an element using following properties:
• border-bottom-style: It changes the style of bottom border.
• border-top-style: It changes the style of top border.
• border-left-style: It changes the style of left border.
• border-right-style: It changes the style of right border.
C. border-width: It specifies the width of a border.
The border-width property allows you to set the width of an element borders. The value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick.
You can individually change the width of the bottom, top, left, and right borders of an element using the following properties:
• border-bottom-width changes the width of bottom border.
• border-top-width changes the width of top border.
• border-left-width changes the width of left border.
• border-right-width changes the width of right border.
3.Padding - Clears an area around the content. The padding is affected by the background color of the box.
4.Content - The content of the box, where text and images appear.
Border Properties Using Shorthand:
The border property allows you to specify color, style, and width of lines in one property.We can show all the three properties into a single property.
Example:
<p style="border:4px solid red;">This example is showing shorthand property for border.</p>
@----------------@
Example:24
Example(border.html):
<html><head><title> CSS border-color Property</title>
<style type="text/css">
p.color1{
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.color2{
border:1px solid;
border-color:#009900; /* Green */
}
</style></head>
<body>
<p class="color1">
This example is showing bottom:green,top:red,left:black,right:blue
colors </p>
<p class="color2">
This example is showing all borders in green color only.</p>
</body></html>
Example:25
Example(border2.html):
<html><head><title> CSS border-style Property</title></head>
<body>
<p style="border-width:4px; border-style:none;">
This is a border with none width. </p>
<p style="border-width:4px; border-style:solid;">
This is a solid border. </p>
<p style="border-width:4px; border-style:dashed;">
This is a dahsed border. </p>
<p style="border-width:4px; border-style:double;">
This is a double border. </p>
<p style="border-width:4px; border-style:groove;">
This is a groove border. </p>
<p style="border-width:4px; border-style:ridge">
This is aridge border. </p>
<p style="border-width:4px; border-style:inset;">
This is a inset border. </p>
<p style="border-width:4px; border-style:outset;">
This is a outset border. </p>
<p style="border-width:4px; border-style:hidden;">
This is a hidden border. </p>
<p style="border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles. </p>
</body></html>
Example:26
<html><head> <title> CSS border-width Property</title></head>
<body>
<p style="border-width:4px; border-style:solid;">
a solid border whose width is 4px. </p>
<p style="border-width:4pt; border-style:solid;">
a solid border whose width is 4pt. </p>
<p style="border-width:thin; border-style:solid;">
It is a solid border whose width is thin. </p>
<p style="border-width:medium; border-style:solid;">
a solid border whose width is medium; </p>
<p style="border-width:thick; border-style:solid;">
a solid border whose width is thick. </p>
<p style="border-bottom-width:4px;
border-top-width:10px;
border-left-width: 2px;
border-right-width:15px;
border-style:solid;">
a border with four different width. </p>
</body></html>
Example:27
<html><head> <style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
} </style></head>
<body>
<img src="d:\css\bomma.gif" width="250" height="250">
<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>
</body></html>
