CSS - border-bottom-color Property

Quiz

CSS border-bottom-color property sets the color of an element's bottom border. The appearance of the border can be modified by providing color values in different formats such as names, rgb values, hexadecimal values or hsl values.

Syntax

border-bottom-color: color | transparent | initial | inherit;

Property Values

Value	Description
color	It specifies the color of border. Different color formats can be used (names,rgb values,hex values,hsl values etc.). Default color is the current color of the element.
transparent	It specifies that the border must be transparent.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Bottom Color Property

The following examples explain the border-bottom-color property with different values.

Border Bottom Color Property with Color Names

The border-bottom-color can be set by using color names. In the following example, blue color has been used.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: blue;
    }
  </style>
</head>

<body>
  <h2>
    CSS border-bottom-color property
  </h2>
  <p> 
    This shows the border bottom color property 
    using color name: blue
  </p>
</body>

</html>

Border Bottom Color Property with Hexadecimal Value

The border-bottom-color can be set by using hexadecimal values too. In the following example, #ff6600 value has been used.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: #ff6600;
    }
  </style>
</head>

<body>
  <h2>
    CSS border-bottom-color property
  </h2>
  <p> 
    This shows the border bottom color property 
    using hexadecimal value:#ff6600
  </p>
</body>

</html>

Border Bottom Color Property with RGB Value

The border-bottom-color can be set by using rgb values too. In the following example, rgb value (255, 166, 77) has been used.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: rgb(255, 166, 77);
    }
  </style>
</head>

<body>
  <h2>
  CSS border-bottom-color property
  </h2>
  <p> 
  This shows the border bottom color property 
  using rgb value:(255, 166, 77)
  </p>
</body>

</html>

Border Bottom Color Property with HSL Value

The border-bottom-color can be set by using hsl values too. In the following example, hsl value (45, 100%, 30%) has been used.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: hsl(45, 100%, 30%);
    }
  </style>
</head>

<body>
  <h2>
    CSS border-bottom-color property
  </h2>
  <p> 
    This shows the border bottom color property 
    using hsl value:(45, 100%, 30%)
  </p>
</body>

</html>

Border Bottom Color Property with Transparent Value

To have a transparent border-bottom-color, the transparent value can be used. In the following example, transparent value has been used.

Example

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      padding: 10%;
      border: 4px solid;
      border-bottom-color: transparent;
    }
  </style>
</head>

<body>
  <h2>
    CSS border-bottom-color property
  </h2>
  <p> 
    This shows the border bottom color property 
    using transparent value.
  </p>
</body>

</html>

Supported Browsers

Property
border-bottom-color	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page