HTML and CSS Reference
In-Depth Information
Borders
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.
8
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
CSS:
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;
}
