BORDER COLOR 2
DIFFERENT SIDES, DIFFERENT COLORS
by Florence W Deems
Just as for the border-width, the border-color will NOT work unless you also include the border-style FIRST.
Spec order: top & bottom - red; both sides - blue
Specs: top - red; both sides - green; bottom - blue
Starting at the top, the color specs move in a clockwise direction.
Top - red; right side - green; bottom - blue; left side - purple
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.
Remember to include a DOCTYPE tag, such as <!DOCTYPE html>
to start the page, or IE 8 might show peculiar results.
Border Styles Introduction ~ 2 ~ 3
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
Sunday 10th of December 2023 07:59:40 AM