HTML and CSS Reference
In-Depth Information
Before I talk about padding or margins, I want to talk about borders. CSS provides sev-
eral properties for adding borders around elements and changing how they are displayed.
Using CSS, you can apply a border to any box.
The border-style property specifies the type of border that will be displayed. Valid
options for the border-style are none , dotted , dashed , solid , double , groove , ridge ,
inset , outset , and inherit . Most of the styles alter the border appearance, but none and
inherit are special. Setting the border-style to none disables borders, and inherit
uses the border-style inherited from a less-specific selector.
The border-width property specifies how wide the border around a box should be.
Borders are usually specified in pixels, but any CSS unit of measurement can be used. To
create a 1-pixel, dashed border around all the anchors on a page, you use the following
a { border-width: 1px; border-style: solid; }
The final border style, border-color , is used to set the color for a border. To set the bor-
der color for links to red, you use the following style declaration:
a { border-color: red; }
You can also set border properties for an element using what's called a shortcut property .
Instead of using the three separate border properties, you can apply them all simultane-
ously as long as you put the values in the right order, using the border property. It's used
as follows:
selector { border: style width color; }
So, to add a three pixel dashed red border to the links on a page, you use the following
style decoration:
a { border: dashed 3px red; }
You can use different values for each side of a box when you're using any of the box
properties. There are two ways to do so. The first is to add directions to the property
names, as follows:
a {
border-width-left: 3px;
border-style-left: dotted;
border-color-left: green;
Search WWH ::

Custom Search