EN
CSS - create multi-color border
0
points
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:
- the first one is for top border color,
- the second one for right and left side,
- 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>