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
Effect of Color Property on Borders and Outlines in CSS
We can define the border color and outline color for an element. Unlike borders, outline doesn't take up any space. The border-color property is used to set an element's border color and the outline-color property is used to set its outline color.
Syntax
/* for setting border-color */
selector {
border-color: value;
}
/* for setting outline-color */
selector {
outline-color: value;
}
Possible Values
| Value | Description |
|---|---|
color name |
Named colors like red, blue, green |
hex |
Hexadecimal values like #FF0000 |
rgb() |
RGB values like rgb(255, 0, 0) |
transparent |
Makes the border/outline transparent |
Example 1: Border and Outline on Div and Span
The following example demonstrates how to apply different border and outline colors to nested elements −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 50px auto;
border-style: solid;
border-width: 3px;
border-color: darkmagenta dodgerblue;
outline-style: dotted;
outline-width: 2px;
outline-color: black;
height: 80px;
width: 80px;
position: relative;
}
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-width: 2px;
border-color: limegreen crimson;
position: absolute;
outline-width: 5px;
outline-style: ridge;
outline-color: orange;
top: 15px;
border-radius: 50%;
display: block;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
A square div with purple-blue borders and black dotted outline appears, containing a circular span with green-red borders and an orange ridge outline.
Example 2: Border and Outline on Paragraph
This example shows how to style a paragraph with colored borders and outlines −
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-width: 5px;
border-style: ridge;
border-color: lightblue;
outline-style: solid;
outline-width: 3px;
outline-color: darkviolet;
padding: 15px;
margin: 20px;
}
h2 {
text-align: center;
color: #333;
}
</style>
</head>
<body>
<h2>Exam Timings</h2>
<p>Entrance Exam timings 3PM - 5PM. All candidates are requested to report at 2:45PM.</p>
</body>
</html>
A paragraph with light blue ridge borders and dark violet solid outline displays the exam timing information with proper padding and spacing.
Key Differences
| Property | Takes Space | Position |
|---|---|---|
border-color |
Yes | Between content and margin |
outline-color |
No | Outside the border |
Conclusion
The border-color and outline-color properties allow you to customize element appearance. Remember that borders affect layout while outlines don't take up space and are purely decorative.
Updated on: 2026-03-15T14:13:18+05:30
473 Views
Advertisements