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.




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

Monday 26th of June 2017 09:41:06 AM



by

~~~

Tandem Tooters

Arbor Hosting