CSS Quicktip: Borders Inherit Colors

March 9th, 2007

Here’s a quick little something you may not have known about CSS borders.

The border shorthand can be used without providing a color value. This is completely valid CSS:

border: 1px solid;

Now that’s not so interesting in itself, right? What makes this interesting is the fact that when you don’t provide a border color value, it inherits the color value of the container, making it the same color as the text it surrounds.

border: 1px solid; color: #c00;

This might save you a little code the next time you’re styling links with borders instead of text-decoration, like when you’re using anything other than the standard underline:

example link

Got any more CSS time savers? Let us know in the comments!

2 Responses to “CSS Quicktip: Borders Inherit Colors”

  1. cram says:

    Das hat Dir der Teufel verraten!
    The devil told you that!

  2. Grim... says:

    Interesting…

Please leave a comment, I'd love to hear from you!