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:
xxxxxxxxxx1
.multi-color {2
border-width: 10px;3
border-color: red yellow green blue; /* up to four colors */4
border-style: solid;5
}
In this example, we create a four-colored border for a div element. Colors are specified in a clockwise direction starting from top.
Syntax:
xxxxxxxxxx1
.colored-border {2
border-color: red yellow green blue; /* border-color: top right bottom left */3
}Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.colored-border {7
height: 100px;8
width: 100px;9
border-width: 20px;10
border-color: red yellow green blue; /* border-color: top right bottom left */11
border-style: solid;12
}13
14
</style>15
</head>16
<body>17
<div class="colored-border"></div>18
</body>19
</html>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:
xxxxxxxxxx1
.colored-border {2
border-color: red yellow blue; /* border-color: top rght/left bottom; */3
}Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.colored-border {7
height: 100px;8
width: 100px;9
border-width: 20px;10
border-color: red yellow blue; /* border-color: top rght/left bottom; */11
border-style: solid;12
}13
14
</style>15
</head>16
<body>17
<div class="colored-border"></div>18
</body>19
</html>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:
xxxxxxxxxx1
.colored-border {2
border-color: red blue; /* border-color: top/bottom rght/left; */3
}Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.colored-border {7
height: 100px;8
width: 100px;9
border-width: 20px;10
border-color: red blue; /* border-color: top/bottom right/left */11
border-style: solid;12
}13
14
</style>15
</head>16
<body>17
<div class="colored-border"></div>18
</body>19
</html>