View unanswered posts | View active topics It is currently Wed May 23, 2018 6:46 am

Reply to topic  [ 3 posts ] 
 HTML color names not working with border-radius 
Author Message

Joined: Fri Jan 28, 2011 8:59 am
Posts: 2
Post HTML color names not working with border-radius

After a bit of investigation, I've found out that if I specify border-color or background-color using the more unusual color names, then I end up with black (on black) display for that component. I've always tried to use names rather than hex values, so I stick to the 140 or so "accepted" colors.

However, if I have CSS that says:

border-style: solid;
border-width: 3px;
border-radius: 15px;
behavior: url(;
background-color: mistyrose;
border-color: red;

- I end up with a black box (with a curved red border). Any text (regardless of colour) inside is not shown.

If I replace 'mistyrose' with #FFE4E1 all is good. Or if I use 'black', 'blue', 'red' - any of the 16 w3c base color names - it's also fine.

I assume the extra colour names are not supported, even though IE works fine on its own with them.

Hopefully this might help someone else trying to figure out why something isn't showing before they end up staring hard at their z-index and position attributes(!)

Fri Jan 28, 2011 9:13 am

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1452
Post Re: HTML color names not working with border-radius
This is because while IE supports the extended color names in CSS, it does not support them in VML so it falls back to black.

A community member provided me a mapping of all color names to corresponding hex codes, and that has been integrated into the code so that it will now perform a lookup for color names it doesn't recognize. That happened after beta3 but if you want the fix you can download and build the current source code from GitHub.

Fri Jan 28, 2011 10:23 am

Joined: Fri Jan 28, 2011 8:59 am
Posts: 2
Post Re: HTML color names not working with border-radius
Hi Jason,

Thanks for the reply. I'll leave it with the hex codes ... although I've a fondness for the eloquence of 'mistyrose' and 'powderblue'.

I am really impressed with CSS3/PIE, having spent some time trying out 'border-radius' and 'curvycorners' this appears to be the best and least intrusive solution. I can use the same html and css cross-browser, without any exception coding, and end up with very similar user interfaces.

Thanks a lot!

Fri Jan 28, 2011 11:12 am
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: No registered users and 2 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.