HTML and CSS Reference
In-Depth Information
Border fit and finish
It's time to finish off the guarantee paragraph. All we need to do is give
it a ragged-looking border. But which style is that? The available styles
are solid, double, dotted, dashed, groove, ridge, inset, and outset. So how
do we make it look ragged? It's actually just a trick: we're using a dashed
border that has its color set to white (matching the background color of the
page). Here's how you do it. Begin by just making the border dashed. Find
the
border-style
property in your “lounge.css” and change it, like this:
Here we'v
e changed
the bord
er from solid
to dashe
d.
border-style: dashed;
Go ahead and save the file and reload. You should see a border like this:
Now, to get a ragged-looking border, just set the color of the border
to white. This makes the border look like it is cutting into the
background color. Give it a try: find the
border-color
property
and set it to
white
.
And here we've changed
the border color from
black to white.
border-color: white;
Save the file and reload again. Now you should see the ragged border:
Browsers don't always agree on
the size of thin, medium, and thick.
Browsers can have different default
sizes for the keywords thin, medium, and
thick, so if the size of your border is really
important to you, consider using pixel sizes instead.
