Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
Set Outline and Border for Span and div
In this example, we have set the outline and border for span and div −
<div> <span></span> </div>
Set the outline and border for the <div> −
div {
margin: auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: dotted;
outline-color: black;
height: 80px;
width: 80px;
}
Set the outline and border for the <span> inside the <div> −
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%;
}
Example
Let us now see the example −
<!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>
Set Outline and Border Styles for a Paragraph
We have set a paragraph here using the <p> tag −
<p>Entrance Exam timings 3PM - 5PM. All candidates are requested to report at 2:45PM.</p>
Let us style it and set the border width, stile, color and outline style an color −
p {
border-width: 5px;
border-style: ridge;
border-color: lightblue;
outline-style: solid;
outline-color: darkviolet;
}
Example
Let us now see the example −
<!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>
230 Views
