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

The syntax for CSS border-color and outline-color property is as follows −

/*for setting border-color*/
Selector {
   border-color: /*value*/
}
/*for setting outline-color*/
Selector {
   outline-color: /*value*/
}

The following examples illustrate CSS border-color and outline-color property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
span {
   margin: 15px;
   padding: 20px;
   border-style: solid;
   border-color: limegreen crimson;
   position: absolute;
   outline-width: 5px;
   outline-style: ridge;
   outline-color: orange;
   top: 15px;
   border-radius: 50%;
}
div {
   margin: auto;
   border-style: solid;
   border-color: darkmagenta dodgerblue;
   outline-style: dotted;
   outline-color: black;
   height: 80px;
   width: 80px;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   border-width: 5px;
   border-style: ridge;
   border-color: lightblue;
   outline-style: solid;
   outline-color: darkviolet;
}
</style>
</head>
<body>
<h2>Exams Timings</h2>
<p>Entrance Exam timings 3PM - 5PM. All candidates are requested to report at 2:45PM.</p>
</body>
</html>

Output

This gives the following output −

raja
Published on 09-Jan-2020 11:23:37
Advertisements