| |
Every block-level element or replaced element is contained in what the cascading stylesheets creators call a box.
That box consists of:
- the element itself,
- the padding around the element,
- the border around the padding, and
- the margin around the border.
You can control the padding, border, and margin separately.
Margins can be negative, and initially margins are 0.
Padding cannot be negative, and initially padding is 0.
<P style="padding: 10px; background-color:#ffddff;
border-color: red gold green blue;
border: solid 15px ;
margin: 5px;">
This example is placed in a table with coloured background, so the transparent margin is revealed. Transparent padding surrounds the text.
|
Each border can have its width, color and style specified independently for the four sides, in the clockwise order border-top, border-right, border-bottom, and border-left. This example uses 'border-color: red gold green blue'. |
Border Properties
There are properties for all four sides of the element box. And one set each for the three kinds of defining qualities (width, style, color). By mixing and matching the various predefined styles, selecting the right colors and setting various widths a great variety of looks can be achieved.
Border-Width:
border-top-width: [value]
border-left-width: [value]
border-right-width: [value]
border-bottom-width: [value]
Widths can be specified with 'thin', 'medium', 'thick' or any of the CSS "length" units. The initial value is 'medium' (used if no width is specified).
'border-width' is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' at the same place in the style sheet.
Widths set using padding: 10px;
border-top : thin solid tan;
border-right : 21px solid tan;
border-bottom : thick solid tan;
border-left : 7px solid tan;
Border-Color:
border-top-color: [value]
border-left-color: [value]
border-right-color: [value]
border-bottom-color: [value]
Colors may be specified with any of the CSS color values, or as 'transparent'.
If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.
Example: <P style="color: black; background: white; border: solid;">
In this example, the border will be a solid black line. </P>
In this example, the border will be a solid black line (because color is inherited).
Border-Style:
The initial value of the border style is 'none', so no borders will be visible unless the border style is set.
border-top-style: [value]
border-left-style: [value]
border-right-style: [value]
border-bottom-style: [value]
The predefined styles that work for IE4 are: none, solid, double, groove, ridge, inset, outset
IE5 adds dashed and dotted.
The 'border-style' property sets the style of the four borders. It can have from one to four values, and the values are set on the different sides as for 'border-width' above.
<h2 style="border: solid 15px ;border-color: red gold green blue">City Gallery Books</h2>
|
solid
City Gallery Books |
double
City Gallery Books | |
groove
City Gallery Books |
ridge
City Gallery Books | |
inset
City Gallery Books |
outset
City Gallery Books
| |
dashed 15px
City Gallery Books
are the best |
dotted 15px
City Gallery Books
are the best
|
border-top : thin solid red;
border-right : 21px groove gold;
border-bottom : thick inset green;
border-left : 7px outset blue;
City Gallery Books |
Since, to some extent, the properties have overlapping functionality, the order in which the rules are specified is important.
Consider this example:
BLOCKQUOTE { border:solid;
border-color: red; padding: 10px;
border-left: thick double;
color: green
}
border:solid; had to be added as first item, to make this example work.
The color of the left border is green, while the other borders are red. This is due to 'border-left' setting the width, style, and color. Since the color value is not given by the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.
|