Learn CSS Outline Color Property with HTML Example

CSS Outline Color Property with Examples


CSS Outline Color Property in 2026

This Blog You Will Learn
 ஃ What is CSS Outline Color property?
 ஃ Syntax 
 ஃ Why outline-color is important ?
 ஃ Syntax 
 ஃ Why outline-color is important ?
 ஃ structure diagram examples
 ஃ 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.

ஃ structure diagram examples

Learn CSS Outline Color Property with HTML Example


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

Step  1] 

<!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;
}

  1. outline-style: solid;  -> Draws a solid outline.
  2. outline-color  red;   ->  Outline color is red.
  3. Outline appears outside the border.

Dotted Blue Outline

p.ex2 {
outline-style: dotted;
  outline-color: blue;
}

  1. dotted creates small dots.
  2. blue colored outline
Outset Green outline

p.ex3 {
  outline-style: outset;
  outline-color: green;
}

  1. outset gives 3D raised effect
  2. green colored outline
Invert Outline (solid)

p.ex4 {
  outline-style: solid;
  outline-color: invert;
}

  1. Browser automatically inverts background color
  2. 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>

  1. <h2>  is heading Tag.
  2. <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>

  1. <p> create a paragraph 
  2. Class = "ex1" ,Class = "ex2", Class = "ex3"  , Class = "ex4"  
  3. CSS rules written for .ex1

Step 8]

Closing tag


  </body>
</html>

CSS Outline Color Property 

Output

CSS Outline Color Property

Related Post :-

What is CSS text color

CSS Padding property

CSS Margin property

Comments

Post a Comment

Popular posts from this blog

HTML Tag

Image
 HTML Tag  Html basic tag:-   <!DOCTYPE html> Html  first line of the code <!DOCTYPE html> is called a doctype declaration the browser which version of HTML the page is written . Html tag using the doctype the HTML5 , the most up-to-date version of  HTML language.The DOCTYPE declaration of the instruction to web browser of HTML the page is written in.  <HTML>:- <Html>.   </html> <html> tag tells the browser  this is HTML document . The <html> tag represent the root of  HTML document. The <html> tag is the container for other HTML elements  <!DOCTYPE> . The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is a computer language that makes up most web pages and online applications. A hypertext text used to reference other pieces of text, while a markup language is a series of markings that tells w...
Read more

HTML Input Type Submit Syntax and Example

Image
What is Input Type Submit in HTML The input type="submit" in HTML is used to create a submit button in a form. When a user clicks this button, it sends (submits) the form data to a server for processing. In simple words, a submit button helps users send the information they entered in a form, like login details, contact forms, or registration data. Syntax : <input type= "submit" value="submit"> type ="submit"  ➡ create a submit button  value ="send"    ➡ text shown on the button A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐ HTML Input Type Submit Syntax and Example  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong >...
Read more

CSS Text Color Explained with Syntax and HTML Examples

Image
 What Is CSS Text Color This Blog You Will Learn  ஃ   What Is CSS Text Color  ஃ   Syntax   ஃ   Purpose of Text Color  ஃ    Real world Use Cases  ஃ    What Is CSS Text Color  Example    ஃ   Output What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. ஃ  structure diagram examples What Is CSS Text Color Example   <! DOCTYPE html > ...
Read more