CSS Outline Color Property in 2026
CSS Outline Color Property with Examples
This Blog You Will Learn
ஃ What is CSS Outline Color property?
ஃ Syntax
ஃ Why outline-color is important ?
ஃ CSS Outline Color Property Examples
ஃ CSS Outline Color Property Output
What is CSS Outline Color property?
CSS Outline-color property use to set color of outline is drawn outside the border of HTML Element.
Syntax
outline-color: color | invert;
Why outline-color is important ?
✔ Improves visibility of elements.
✔ Used for focus states (button,forms)
✔ Helps accessibility.
✔ Highlights elements without breaking layout.
CSS Outline Color Property
Examples
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black;
padding: 5px;
}
p.ex1 {
outline-style: solid;
outline-color: red;
}
p.ex2 {
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
outline-style: outset;
outline-color: green;
}
p.ex4 {
outline-style: solid;
outline-color: invert;
}
</style>
</head>
<body>
<h2>CSS Outline color Property</h2>
<p>css outline-color is property that sets outline-color
of outline drawn outside an element border</p>
<p class="ex1">A solid purple outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset green outline.</p>
<p class="ex4">A solid invert outline.</p>
</body>
</html>
CSS Outline Color Property with Examples
Explain Program
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
<head>
- <head> section contains metadata and css styles,not visible content.
- Contains styles, metadata and page setting
Step 4]
<style> tag Internal CSS Section
CSS Outline Color Property with Examples
p {
border: 1px solid black;
padding: 5px;
}
border :1px solid black;
- Add thin black border around the paragraph.
Padding: 5px;
- Add Space inside the border.
- border helps difference between border and outline
Solid Red Outline
p.ex1 {
outline-style: solid;
outline-color: red;
}
- outline-style: solid; -> Draws a solid outline.
- outline-color red; -> Outline color is red.
- Outline appears outside the border.
Dotted Blue Outline
p.ex2 {
outline-style: dotted;
outline-color: blue;
}
- dotted creates small dots.
- blue colored outline
Outset Green outline
p.ex3 {
outline-style: outset;
outline-color: green;
}
- outset gives 3D raised effect
- green colored outline
p.ex4 {
outline-style: solid;
outline-color: invert;
}
- Browser automatically inverts background color
- Mainly used for accessibility and focus styles.
Step 5]
Closing tag
<</style>
</head>
Step 6]
<body> section
<h2>CSS Outline color Property</h2>
<p>css outline-color is property that sets outline-color
of outline drawn outside an element border</p>
- <h2> is heading Tag.
- <p> defines a paragraph Tag
Step 7]
<p class="ex1">A solid purple outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset green outline.</p>
<p class="ex4">A solid invert outline.</p>
- <p> create a paragraph
- Class = "ex1" ,Class = "ex2", Class = "ex3" , Class = "ex4"
- CSS rules written for .ex1
Step 8]
Closing tag
</body>
</html>
CSS Outline Color Property
Output
Comments
Post a Comment