border
border-style
The border-style property defines the format of the border. The table below shows the possible values and how each one renders.
| CSS Declaration | Output |
|
p {border-style:solid;}
| Solid Border
|
|
p {border-style:dashed;}
|
Dashed Border
|
|
p {border-style:double;}
|
Double Border
|
|
p {border-style:dotted;}
|
Dotted Border
|
|
p {border-style:groove;}
|
Groove Border
|
|
p {border-style:ridge;}
|
Ridge Border
|
|
p {border-style:inset;}
|
Inset Border
|
|
p {border-style:outset;}
|
Outset Border
|
border-width
The border-width property specifies the width of the border. The value can be "thin", "medium", "thick", or a numerical width.
| CSS Declaration | Output |
|
p {border-width:9px; border-style:solid;}
| Border Width 9px
|
|
p {border-width:medium; border-style:dashed;}
|
Border Width Medium
|
border-color
The border-color property specifies the color of the border.
Examples below:
| CSS Declaration | Output |
|
p {border-color:#0000FF; border-style:solid;}
| Border Color Blue
|
|
p {border-color:red; border-style:dotted;}
|
Border Color Red
|
border-top-, border-left-, border-bottom-, border-right-
Directions (top, left, bottom, right) can be combined with style, width, and color to form a 3-part CSS command. For example, border-top-style specifies the style of the top border.
Some examples below:
| CSS Declaration | Output |
|
p {border-top-style:solid; border-bottom-style:dotted;}
| Sample 1
|
|
p {border-top-style:solid; border-top-width:medium;}
| Sample 2
|
|
p {border-left-style:solid; border-bottom-style:dashed;
border-bottom-color:#00FF00;}
| Sample 3
|
border
If the characteristics for all 4 sides of the border are the same, they can be combined into a single line using the border property. In addition, all three border properties (border-style, border-width, and border-color) can be combined into a single line with the border command.
For example, with the CSS declaration,
|
p {
border:#0000FF 5px solid;
}
|
The following HTML,
|
<p>A single line declares all border properties.</p>
|
yields the output below:
A single line declares all border properties.
Next: CSS Padding
Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.
More Tutorials: SQL PHP HTML
Copyright 2007-2010 1keydata.com All Rights Reserved. Privacy Policy