Border Color 2, Different Sides Different Colors, by Florence W Deems

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.

One-colored border!

Two-colored border!
Spec order: top & bottom - red; both sides - blue

Three-colored border!
Specs: top - red; both sides - green; bottom - blue

Four-colored border!
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.

<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.one { border-style:solid; border-color:#0000ff; border-width:10px; } p.two { border-style:solid; border-color:#ff0000 #0000ff; border-width:10px; } p.three { border-style:solid; border-color:#ff0000 #00ff00 #0000ff; border-width:10px; } p.four { border-style:solid; border-color:#ff0000 #00ff00 #0000ff #ff00ff; border-width:10px; } </style> </head>  <p class="four">text goes here</p>

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 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

Friday 13th of December 2024 06:21:06 AM

by

~~~

Tandem Tooters

Arbor Hosting