Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to define the color of the border using CSS?
The CSS border-color property is used to define the color of an element's border. You can set the same color for all four sides or specify different colors for each side individually.
Syntax
selector {
border-color: value;
}
/* Individual sides */
selector {
border-top-color: value;
border-right-color: value;
border-bottom-color: value;
border-left-color: value;
}
Possible Values
| Value | Description |
|---|---|
color name |
Named colors like red, blue, green |
hex code |
Hexadecimal values like #ff0000 |
rgb() |
RGB values like rgb(255, 0, 0) |
transparent |
Makes the border transparent |
Example 1: Uniform Border Color
The following example sets a uniform blue border color for all four sides
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.uniform-border {
height: 100px;
width: 300px;
margin: 20px auto;
padding: 10px;
border: 5px solid blue;
background-color: #f0f8ff;
}
</style>
</head>
<body>
<h3>Uniform Border Color</h3>
<div class="uniform-border">This div has a blue border on all sides.</div>
</body>
</html>
A light blue box with a uniform blue solid border appears with centered text.
Example 2: Different Colors for Each Side
The following example demonstrates setting different colors for each side of the border
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.multi-color-border {
height: 100px;
width: 300px;
margin: 20px auto;
padding: 10px;
border-style: solid;
border-width: 5px;
border-top-color: blue;
border-right-color: red;
border-bottom-color: green;
border-left-color: orange;
background-color: #fafafa;
}
</style>
</head>
<body>
<h3>Multi-Color Border</h3>
<div class="multi-color-border">Each side has a different border color.</div>
</body>
</html>
A box with blue top border, red right border, green bottom border, and orange left border appears.
Example 3: Dotted Borders with Colors
The following example shows how to combine border colors with dotted border styles
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.dotted-border {
height: 100px;
width: 300px;
margin: 20px auto;
padding: 10px;
border-top: 4px dotted purple;
border-right: 5px dotted crimson;
border-bottom: 6px dotted teal;
border-left: 7px dotted darkgreen;
background-color: #fff9e6;
}
</style>
</head>
<body>
<h3>Dotted Border Colors</h3>
<div class="dotted-border">Dotted borders with different colors and widths.</div>
</body>
</html>
A box with dotted borders of varying colors and widths on each side appears.
Conclusion
The border-color property provides flexible control over border appearance. You can use uniform colors or create unique designs with different colors for each side, enhancing your webpage's visual appeal.
Updated on: 2026-03-15T16:24:01+05:30
94 Views
Advertisements