CSS Property border-color

The border-color property is employed to line the colour of the borders of a part.

It is a shorthand property for the border-top-color, border-right-color, border-bottom-color, and border-left-color properties.

The value of the border-color property will be specific victimisation one, two, three, or four elements.

When one price is employed, the worth specifies the colour of the highest, right, bottom, and left borders. If 2 values area unit used, the primary price specifies the colour of the highest and bottom borders and also the second price specifies the colour of the correct and left borders. If 3 values area unit used, the primary one specifies the colour of the highest border, the second specifies the colour of the correct and left borders, and also the third one specifies the colour of the lowest border. If four values area unit used, the first, second, third, and fourth values specify the colour of the highest, right, bottom, and left borders severally.

When borders area unit separate, the table and every of its table cells will have their own distinct borders, and there’s area between them. you’ll management the quantity of area between borders of adjacent table cells victimization the border-spacing property.

When borders area unit “collapsed”, adjacent table cells share borders, and also the cells at the perimeters of the table share their borders with the borders of the table itself.

The width of the border are often explicitly set employing a price, or by using one in all 3 border dimension keywords: skinny, medium, and thick.

CSS Property border-color Value

  • <color>

<color>

See the <color> entry for a list of possible values.

Desktop Browser Support

Mobile Browser Support

Examples

.class{
    border-style: dotted;
    border-width: 1em;

    border-color: red; /* one-value syntax */

    /* or */
    border-color: red green; /* two-value syntax */

    /* or */
    border-color: red pink green; /* three-value syntax */
    
    /* or */
    border-color: red pink yellow green; /* four-value syntax */
}

One comment

  1. Hiya, I am really glad I have found this info. Nowadays bloggers publish only about gossips and net and this is actually annoying. A good web site with interesting content, that’s what I need. Thank you for keeping this web site, I’ll be visiting it. Do you do newsletters? Can not find it.

Leave a Reply