CSS BORDER COLOR

on

To set a border color in CSS, use the border-color property:

1. Basic border-color

The border-color property changes the color of an element's border.

.box {
  border-style: solid;
  border-width: 2px;
  border-color: red;
}
<div class="box">Hello</div>

You normally need three properties for a visible border:

border-width: 2px;
border-style: solid;
border-color: red;

Or combine them:

border: 2px solid red;

2. Different color formats

Color name

border-color: red;

HEX color

border-color: #3498db;

RGB

border-color: rgb(52, 152, 219);

RGBA — with transparency

border-color: rgba(52, 152, 219, 0.5);

HSL

border-color: hsl(204, 70%, 53%);

3. Different colors on each side

You can give the four sides different colors:

.box {
  border-style: solid;
  border-width: 5px;
  border-color: red blue green orange;
}

The order is:

Top → Right → Bottom → Left

So:

Side  Color
Top  Red
Right  Blue
Bottom  Green
Left  Orange

4. Only one side

You can change the color of a specific side:

.box {
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-left-color: orange;
}

For example, only the bottom border:

.box {
  border-bottom: 3px solid red;
}

5. Border color with different styles

Border color works with different border styles:

.box {
  border: 3px solid red;
}
.box {
  border: 3px dashed blue;
}
.box {
  border: 3px dotted green;
}
.box {
  border: 5px double purple;
}

Common border styles include:

  • solid
  • dashed
  • dotted
  • double
  • groove
  • ridge
  • inset
  • outset
  • none

6. Different width, style, and color

You can customize every side:

.box {
  border-top: 3px solid red;
  border-right: 5px dashed blue;
  border-bottom: 2px dotted green;
  border-left: 4px double orange;
}

7. border-color shorthand

You can also use fewer values.

border-color: red;

All four sides become red.

border-color: red blue;
  • Top & Bottom → red
  • Left & Right → blue 
border-color: red blue green;
  • Top → red
  • Left & Right → blue
  • Bottom → green 
border-color: red blue green yellow;
  • Top → red
  • Right → blue
  • Bottom → green
  • Left → yellow

8. Using CSS variables

For larger websites, you can store your border color in a variable:

:root {
  --border-color: #3498db;
}

.box {
  border: 2px solid var(--border-color);
}

Then you can easily change the color in one place.

Complete example

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 4px solid #3498db;
      border-radius: 10px;
      color: #333;
    }
  </style>
</head>

<body>

  <div class="box">
    This is a box with a blue border.
  </div>

</body>
</html>

The most commonly used form is simply:

border: 2px solid #3498db;

Here, 2px = border width, solid = border style, and #3498db = border color.

Comments

Post a Comment