CSS border-color – define color of four borders

The border-color property sets the color of the four borders.

CSS property border-color

CSS version: CSS 2.1
Value: [color|transparent]{1,4} | inherit
Initial: depends on user agent (individual properties)
Applies to: all elements
Inherited: no
Few points to note:

  1. When four values are specified this is the order:
    border-top-color, border-right-color, border-bottom-color, border-left-color
    
  2. When less than four values are specified:

    h1 { border-color: red }                   /* red red red red */
    h1 { border-color: red blue }             /* red blue red blue */
    h1 { border-color: red blue green }      /* red blue green blue */
    
  3. border-style must be set to something other than none and border-width should be > 0 for border-color to be applicable.

Example – border-color – top, right, bottom, left

<style type="text/css">
.box {
  width: 100px; height: 100px;
  border-style: solid;
  border-color: red blue green yellow;
}
</style>
<div class="box">
  Hello world in div
</div>
refresh

Example – border-color transparent

Here background color is transparent and hence background color of the element itself is displayed.

<style type="text/css">
.box {
  width: 100px; height: 100px;
  background-color: lightgreen;
  border-style: solid;
  border-width: 15px;
  border-color: transparent;
}
</style>
<div class="box">
  Hello world in div
</div>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments