rick@tillitsdone.com

+66824564755

Scroll to discover

CSS Border-Color Enhance Border Appeal

Learn how to use CSS border-color to enhance the visual appeal of your web designs.

Explore available options like hex codes, RGB, RGBA, HSL, and HSLA.

Introduction

The border-color CSS property is a convenient way to set the color of an element’s border. It’s a shorthand property that lets you define the border color for all sides of an element or each side individually. This makes it a handy tool for web design, allowing you to enhance the visual appeal of your website. You can use various color values with border-color, such as hex codes, RGB, RGBA, HSL, HSLA, and color names, giving you lots of flexibility.

Specification

The border-color property is defined in the CSS Backgrounds and Borders Module Level 3, which outlines how to handle backgrounds and borders in CSS. Additionally, the CSS Logical Properties and Values Level 1 specification details logical shorthand keywords used in CSS.

Description

The border-color property sets the color of the border around an HTML element. It’s a shorthand property that lets you specify the color for all four sides or individually for each side. This flexibility makes it a versatile tool for customizing the appearance of elements in your web design.

You can use various color values with border-color, including:

Hex codes (e.g., #ff0000)
RGB values (e.g., rgb(255, 0, 0))
RGBA values (e.g., rgba(255, 0, 0, 0.5))
HSL values (e.g., hsl(0, 100%, 50%))
HSLA values (e.g., hsla(0, 100%, 50%, 0.5))
Color names (e.g., red)

Individual Side Properties

While border-color is a shorthand, you can also set the border color for each side individually using these properties:

border-top-color: Sets the color of the top border.
border-right-color: Sets the color of the right border.
border-bottom-color: Sets the color of the bottom border.
border-left-color: Sets the color of the left border.

Additional properties for different writing modes include:

border-block-start-color: Sets the color of the border at the start of the block.
border-block-end-color: Sets the color of the border at the end of the block.
border-inline-start-color: Sets the color of the border at the start of the inline direction.
border-inline-end-color: Sets the color of the border at the end of the inline direction.

Syntax

The border-color property can be specified with one, two, three, or four values. Each value represents the color of a specific side or sides of the element’s border.

border-color: <color>;

Values

Single Value: Applies the same color to all four sides.
```
border-color: red;
```
Two Values: The first color applies to the top and bottom borders, and the second color applies to the left and right borders.
```
border-color: red blue;
```
Three Values: The first color applies to the top border, the second color applies to the left and right borders, and the third color applies to the bottom border.
```
border-color: red blue green;
```
Four Values: The colors apply to the top, right, bottom, and left borders in that order (clockwise).
```
border-color: red blue green yellow;
```

Global Values

The border-color property also supports global CSS values:

inherit: Inherits the border color from the parent element.
```
border-color: inherit;
```
initial: Sets the border color to its initial value (currentcolor).
```
border-color: initial;
```
revert: Resets the border color to the value defined by the user-agent stylesheet.
```
border-color: revert;
```
revert-layer: Resets the border color to the value defined by the user-agent stylesheet for the specific layer.
```
border-color: revert-layer;
```
unset: Resets the border color to its inherited value if it inherits, or to its initial value if it does not inherit.
```
border-color: unset;
```

Example

Here’s an example demonstrating various syntax options for the border-color property:

/* Single value */
.element-1 {
  border-color: red;
}

/* Two values */
.element-2 {
  border-color: red blue;
}

/* Three values */
.element-3 {
  border-color: red blue green;
}

/* Four values */
.element-4 {
  border-color: red blue green yellow;
}

Formal Definition

The border-color property is formally defined as a shorthand property that sets the color of an element’s border.

Formal Definition Breakdown

Initial Value: The initial value for border-color is currentcolor, which means it defaults to the current color of the text.
Applies To: The border-color property applies to all elements and also to the ::first-letter pseudo-element.
Inherited: No, the border-color property is not inherited from parent elements.
Computed Value: The computed value for border-color is the computed color for each of the border sides (border-top-color, border-right-color, border-bottom-color, border-left-color).
Animation Type: The border-color property can be animated as a color, which means it interpolates on each of its red, green, blue components, each handled as a real, floating-point number. Note that interpolation of colors happens in the alpha-premultiplied sRGBA color space to prevent unexpected grey colors from appearing.

Formal Syntax

The formal syntax for the border-color property is defined as follows:

border-color = <color> | <image-1D> {1,4}

<image-1D> = stripes( <color-stripe># )

<color-stripe> = <color> && [ <length-percentage> | <flex> ]?

<length-percentage> = <length> | <percentage>

Example

Here’s an example demonstrating the formal definition and syntax of the border-color property:

/* Single value */
.element-1 {
  border-color: red;
}

/* Two values */
.element-2 {
  border-color: red blue;
}

/* Three values */
.element-3 {
  border-color: red blue green;
}

/* Four values */
.element-4 {
  border-color: red blue green yellow;
}

/* Using global values */
.element-5 {
  border-color: inherit;
}

.element-6 {
  border-color: initial;
}

.element-7 {
  border-color: revert;
}

.element-8 {
  border-color: revert-layer;
}

.element-9 {
  border-color: unset;
}

Example

Here’s an example demonstrating the use of different values for the border-color property:

/* Using a color name */
.element-1 {
  border-color: red;
}

/* Using a hexadecimal notation */
.element-2 {
  border-color: #ff0000;
}

/* Using RGB */
.element-3 {
  border-color: rgb(255, 0, 0);
}

/* Using RGBA */
.element-4 {
  border-color: rgba(255, 0, 0, 0.5);
}

/* Using HSL */
.element-5 {
  border-color: hsl(0, 100%, 50%);
}

/* Using HSLA */
.element-6 {
  border-color: hsla(0, 100%, 50%, 0.5);
}

/* Using global values */
.element-7 {
  border-color: inherit;
}

.element-8 {
  border-color: initial;
}

.element-9 {
  border-color: revert;
}

.element-10 {
  border-color: revert-layer;
}

.element-11 {
  border-color: unset;
}

Practical Examples

HTML

<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>

CSS

#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/* Set width and style for all divs */
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}

Individual Side Properties

HTML

<div id="individual-sides">
  <p><code>border-top-color: blue;</code><br>
     <code>border-right-color: green;</code><br>
     <code>border-bottom-color: red;</code><br>
     <code>border-left-color: yellow;</code></p>
</div>

CSS

#individual-sides {
  border-top-color: blue;
  border-right-color: green;
  border-bottom-color: red;
  border-left-color: yellow;
  border-style: solid;
  border-width: 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

Using Different Color Values

HTML

<div id="hex-color">
  <p><code>border-color: #ff0000;</code></p>
</div>
<div id="rgb-color">
  <p><code>border-color: rgb(0, 255, 0);</code></p>
</div>
<div id="rgba-color">
  <p><code>border-color: rgba(0, 0, 255, 0.5);</code></p>
</div>
<div id="hsl-color">
  <p><code>border-color: hsl(0, 100%, 50%);</code></p>
</div>
<div id="hsla-color">
  <p><code>border-color: hsla(0, 100%, 50%, 0.5);</code></p>
</div>
<div id="color-name">
  <p><code>border-color: red;</code></p>
</div>

CSS

#hex-color {
  border-color: #ff0000;
}

#rgb-color {
  border-color: rgb(0, 255, 0);
}

#rgba-color {
  border-color: rgba(0, 0, 255, 0.5);
}

#hsl-color {
  border-color: hsl(0, 100%, 50%);
}

#hsla-color {
  border-color: hsla(0, 100%, 50%, 0.5);
}

#color-name {
  border-color: red;
}

/* Set width and style for all divs */
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

border: A shorthand property that sets the width, style, and color of an element’s border in one declaration.
border-top-color: Sets the color of the top border.
border-right-color: Sets the color of the right border.
border-bottom-color: Sets the color of the bottom border.
border-left-color: Sets the color of the left border.
border-width: Specifies the width of the border.
border-style: Specifies the style of the border, such as solid, dashed, or dotted.
border-radius: Defines the radius of the element’s corners, creating rounded corners.

Additional Border Properties

border-image: Allows you to use an image as the border around an element.
border-image-source: Specifies the image to be used as the border.
border-image-slice: Divides the image into regions.
border-image-width: Specifies the width of the border image.
border-image-outset: Defines the amount by which the border image area extends beyond the border box.
border-image-repeat: Specifies how the border image should be repeated.

color: Sets the color of the text.
background-color: Sets the background color of an element.
outline-color: Sets the color of the outline around an element.
text-decoration-color: Sets the color of the text decoration (e.g., underline, overline).
text-emphasis-color: Sets the color of the emphasis mark.
text-shadow: Adds shadow to the text.
caret-color: Sets the color of the text input cursor.
column-rule-color: Sets the color of the rule between columns.

Additional Resources

Applying Color to HTML Elements Using CSS: A comprehensive guide on how to apply colors to various HTML elements using CSS.
CSS Colors: Detailed information on the different ways to specify colors in CSS.
CSS Border Properties: An overview of all the CSS properties related to borders.

Exploring these properties and resources will help you create visually appealing and functional web designs. Whether you’re working on a simple project or a complex website, these tools will help you achieve your design goals efficiently.