Effect of Color Property on Borders and Outlines in CSS

CSS Web Development Front End Technology

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>