HTML and CSS Reference
In-Depth Information
A two-minute guide to borders
There's only one thing left to do to perfect the guarantee paragraph:
add a better border. Before you do, take a look at all the different ways
you can control the border of an element.
Border Style
The border-style property controls the visual style of the border. There are eight
border styles available, from a solid line to dotted lines to ridges and grooves.
border-style: groove;
To sp
ecify a border style, just use the
bord
er-style property and a value of one
of t
he available styles.
Once you go
dotted,
you'll
never go back.
Go with
solid
,
the original.
An
d the dashe
d
st
yle is just a
se
t of dashes
ar
ound the
bo
rder.
Ignore dotted;
use
dashed
.
Th
e double style
use
s two lines.
Go with
double;
I'm
twice the fun.
I'm the only
“in” style:
inset
.
A groove style
looks like a groove
in the page
(difficult to see
in a book).
I'm the border
that's got the
groove.
The ridge styl
e
looks like a rai
sed
ridge on the p
age.
The
outset style
looks
like
an outset tha
t
rise
s from the pa
ge.
Go with me; I've
been better since
the
outset
.
I'm more fun;
I've got
ridge
s.
