CSS border-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-color property controls the color used to draw an element’s border. It determines the visual tint applied to the border lines that form the element’s perimeter, and is used by the rendering engine when a border is present. Setting this property adjusts only the painting color; it does not by itself create or remove a border - that depends on other border-related properties that define width and style.

Because a border only appears when a non-none style and a positive width are present, border-color is often used together with border-style and with width-related properties (or a shorthand) to produce the final visible edge. It can be thought of as the colour component of the border box: if the border style is set to a value that doesn’t render (for example, no border), the color will have no visible effect. For managing multiple border properties at once, authors frequently use the shorthand border to set width, style and color in a single declaration.

Visually, border color interacts with an element’s background and surrounding elements. Choosing a border color affects perceived separation, emphasis and contrast against the element’s background-color and the page background, and it can either reinforce or conflict with the element’s text color (color) depending on design intent. Borders can be used subtly to suggest structure or more strongly to create emphasis; designers should consider contrast and clarity so borders improve usability rather than creating noise.

In practice, border-color is commonly animated or transitioned for interactive effects (hover, focus, validation states), and it composes well with other outline and focus visuals - for example, an outline may be used in addition to a colored border for accessibility or focus indication. When altering borders in responsive or stateful designs, keep in mind that color changes are a powerful affordance and should be used consistently to maintain predictable visual language.

Definition

Initial value: See individual properties
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.borderColor

Interactive Demo

border-color: blue;

border-color: #ADB946;

border-color: rgb(25, 201, 33);

border-color: rgba(123, 45, 87, .5);

border-color: transparent;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-color: <color>{1,4}

Values

<color>Specify the color to use on all borders. This can be anywhere from one to four values representing the top, right, bottom, and left border respectively.
transparentThis will apply a border that is not visible but it can have a width applied.
inherit

Example

HTML

<div class="container">

  <h1>border-color examples</h1>

  <div class="examples">

    <div class="box single">border-color: #e63946;</div>

    <div class="box four">border-color: #2a9d8f #e9c46a #e76f51 #264653;</div>

    <div class="box transparent">border-color: rgba(0, 0, 0, 0.2);</div>

    <div class="box current">color: rebeccapurple;<br>border-color: currentColor;</div>

    <div class="box none">border-color: transparent;</div>

  </div>

</div>

CSS

/* Basic page layout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f8fafc;
  color: #1f2937;
  padding: 32px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

h1 {
  font-size: 20px;
  margin-bottom: 16px;
}

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.box {
  width: 220px;
  height: 110px;
  padding: 12px;
  box-sizing: border-box;
  border-width: 6px;
  border-style: solid;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: white;
  font-size: 14px;
}

/* Examples of border-color usage */
.single {
  border-color: #e63946; /* single color for all four sides */
  background: #fff8f8;
}

.four {
  border-color: #2a9d8f #e9c46a #e76f51 #264653; /* top right bottom left */
}

.transparent {
  border-color: rgba(0, 0, 0, 0.2); /* semi-transparent border */
  background: #fbfbfb;
}

.current {
  color: rebeccapurple;
  border-color: currentColor; /* uses element's text color */
  background: #fff5ff;
}

.none {
  border-color: transparent; /* invisible border while keeping layout */
  background: #f3f4f6;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.