View Full Version : Borders colors

02-28-2007, 12:17 PM

How can I show a 2-different border colors to a LI? I'm aware of -moz-border-*-colors, but I need IE6+IE7 support.
Of course, I want to keep my HTML semantic as possible.

Any ideas?
Thanks a lot.

02-28-2007, 12:58 PM
border-top:1px solid red;
border-bottom:1px solid blue; for example? or do you want the border of one side (for example bottom) to be 2 colors? i didn't know this was possible

02-28-2007, 01:06 PM
You could use a background-image and place whatever you want bordered inside it's own div with this background image.

02-28-2007, 06:05 PM
You can surround the list item (li) element's content with a div element, set the height of that div to 100%, and apply the border of the inner color to it. The border of the outer color would, of course, be applied to the list item element itself.

Scratch the 100% height part. That would cause the borders to overlap.

02-28-2007, 08:42 PM
what about a SPAN surrounding the text in the LI and giving it a border?

02-28-2007, 08:49 PM
what about a SPAN surrounding the text in the LI and giving it a border?Depending upon the content of the list item elements, using a span element might be invalid. Since span is inline-level, that also means that you may need to declare display: block to get flush borders; might as well use a div that has display: block by default.

03-01-2007, 07:30 AM
As I thought - no "real CSS" for this.
Thanks, I'll probably go with the DIV solution, like I thought at the beginning.