Thursday, 3 November 2011

All CSS Border Properties


This property is used to set the border style, width etc around the text or table to give the better effects.

Property
Description
Values
CSS
Border
Sets all the border properties in one declaration
border-width
border-style
border-color
1
border-bottom
Sets all the bottom border properties in one declaration
border-bottom-width
border-bottom-style
border-bottom-color
1
border-bottom-color
Sets the color of the bottom border
border-color
2
border-bottom-style
Sets the style of the bottom border
border-style
2
border-bottom-width
Sets the width of the bottom border
border-width
1
border-color
Sets the color of the four borders
color_name
hex_number
rgb_number
transparent
inherit
1
border-left
Sets all the left border properties in one declaration
border-left-width
border-left-style
border-left-color
1
border-left-color
Sets the color of the left border
border-color
2
border-left-style
Sets the style of the left border
border-style
2
border-left-width
Sets the width of the left border
border-width
1
border-right
Sets all the right border properties in one declaration
border-right-width
border-right-style
border-right-color
1
border-right-color
Sets the color of the right border
border-color
2
border-right-style
Sets the style of the right border
border-style
2
border-right-width
Sets the width of the right border
border-width
1
border-style
Sets the style of the four borders
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
1
border-top
Sets all the top border properties in one declaration
border-top-width
border-top-style
border-top-color
1
border-top-color
Sets the color of the top border
border-color
2
border-top-style
Sets the style of the top border
border-style
2
border-top-width
Sets the width of the top border
border-width
1
border-width
Sets the width of the four borders
thin
medium
thick
length
inherit
1


Example

<html>
<head>
     <style type=”text/css”>
.myborder
              {
                        border-width:4px;
                        border-style:solid;
                        border-color:#0099CC;
                        border-left-color:#FFCC66;
               }
     </style>
</head>
<body>
     <center>
              <p class="myborder">Hello World</p>
     </center>
</body>
</html>

No comments:

Post a Comment