BORDER STYLES 2
MAKING BOTTOM BORDERS DIFFERENT

by Florence W Deems

---

All the bottom borders in these examples are different,
except for the solid. This has a dotted bottom border.

A solid border on 3 sides,
a dashed bottom border.

A solid border on 3 sides,
plus a solid bottom border.

A solid border on 3 sides,
a double bottom border.

A solid border on 3 sides,
a groove bottom border.

A solid border on 3 sides,
a ridge bottom border.

A solid border on 3 sides,
an inset bottom border.

A solid border on 3 sides,
an outset bottom border.

The div in the head tag produces what looks like a table with rounded corners and a double border. But I had to use a table tag (with border="0") to get this centered on the screen. Please see the Border Radius tutorial link (below) for more info about this effect.

<!-- put this in the head tag --> <style> div { border:6px double; width:700px; padding:10px; background:#ffffff; border-top-left-radius:2em; -webkit-border-top-left-radius:2em; /* Safari */ border-top-right-radius:2em; border-bottom-left-radius:2em; border-bottom-right-radius:2em; } p.dotted {border-style:solid; border-bottom-style:dotted; border-width:8px;} p.dashed {border-style:solid; border-bottom-style:dashed; border-width:8px;} p.solid {border-style:solid; border-bottom-style:solid; border-width:8px;} p.double {border-style:solid; border-bottom-style:double; border-width:8px;} p.groove {border-style:solid; border-bottom-style:groove; border-width:8px;} p.ridge {border-style:solid; border-bottom-style:ridge; border-width:8px;} p.inset {border-style:solid; border-bottom-style:inset; border-width:8px;} p.outset {border-style:solid; border-bottom-style:outset; border-width:8px;} </style> </head> <!-- Place the following in the body, wherever you want one of these borders around a paragraph. --> <p class="dotted">text here.</p> <!-- Remember to include a DOCTYPE tag to start the page, or IE 8 might show peculiar results. -->

---

Border Styles Introduction ~ 2 ~ 3
Border Widths
Border Color Introduction ~ 2
Border Radius: Introduction ~ 2
Border Collapse Spacing ~ Pinning an Element
An older Border Playground from 2008


Visit these other Tutorials by Flo

Tuesday 10th of September 2024 03:46:49 AM



by

~~~

Tandem Tooters

Arbor Hosting