Languages
[Edit]
EN

CSS - create multi-color border

0 points
Created by:
Savannah
319

In this article, we would like to show you how to create a multi-color border in CSS.

Quick solution:

.multi-color {
  border-width: 10px;
  border-color: red yellow green blue;  /* up to four colors */
  border-style: solid;
}

 

Practical examples

1. Four arguments

In this example, we create a four-colored border for a div element. Colors are specified in a clockwise direction starting from top.

Syntax:

.colored-border {
  border-color: red yellow green blue;  /* border-color: top right bottom left */
}

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .colored-border {
      height: 100px;
      width: 100px;
      border-width: 20px;
      border-color: red yellow green blue;  /* border-color: top right bottom left */
      border-style: solid;
    }

  </style>
</head>
<body>
  <div class="colored-border"></div>
</body>
</html>

2. Three arguments

In this example, we create a three-colored border for a div element by specifying three arguments:

  1. the first one is for top border color,
  2. the second one for right and left side,
  3. and the third one for the bottom border color.

Syntax:

.colored-border {
  border-color: red yellow blue;  /* border-color: top rght/left bottom; */
}

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .colored-border {
      height: 100px;
      width: 100px;
      border-width: 20px;
      border-color: red yellow blue;  /* border-color: top rght/left bottom; */
      border-style: solid;
    }

  </style>
</head>
<body>
  <div class="colored-border"></div>
</body>
</html>

3. Two arguments

In this example, we create a two-colored border for a div element by specifying two arguments:

  • the first one for the top and bottom border color,
  • the second one is for the right and left border color.

Syntax:

.colored-border {
  border-color: red blue;  /* border-color: top/bottom rght/left; */
}

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .colored-border {
      height: 100px;
      width: 100px;
      border-width: 20px;
      border-color: red blue;  /* border-color: top/bottom right/left */
      border-style: solid;
    }

  </style>
</head>
<body>
  <div class="colored-border"></div>
</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join