Steve 25

When using moz-border-radius, you're limited to web only colors. Is there a way to use a custom color that you provide in a image file?

2 answers

This was chosen as the best answer

You might be looking for something like this

border-image: url(border.png) 27 27 27 27 round round;
Answered about 8 years ago by Craig Ward
Mottie 1134

You can set the border color using the same old border definition. The border radius only takes a number to indicate the radius of the border. For example:

.someElement {
  border: #0080ff 1px solid; 
  border-radius: 1em;         /* CSS3 standard */
  -moz-border-radius: 1em;    /* Firefox */
  -webkit-border-radius: 1em; /* Web kit */

I'm not sure where you found the information that says that using a border radius limits the colors available.

And, in case you don't know what Craig is talking about, check out this post.

Answered about 8 years ago by Mottie
  • My mistake - I was referring to web safe colors. Steve about 8 years ago
  • You are still using web safe colors? ( Mottie about 8 years ago
  • No, there is no limitation to "web-safe" colours. Nothing in any W3C spec refers to "web safe" colours. In fact there was even some disagreement as to which colours are web-safe, but since the last 8-bit monitors probably died years ago, no one cares any more. Richard Grevers about 8 years ago
  • That should be `border: 1px solid #0080ff;` though, and `border-radius` should be put below the prefixed versions to override when they make a standard implementation, which might be improved from what they have now. Otherwise great. Jacob R about 8 years ago