CSS3 > Outline

Outlines in CSS3

How to create the outline using CSS


Outlines are used to create or draw an  line outside an element which is similar to the border.

  • An outline does not take up space.

  • Outlines do not have to be rectangular.

  • Outline is always the same on all sides; you cannot specify different values for different sides of an element.


 <p>Outline styles</p>
    <p style="outline-style:dashed">Techfunda</p>
    <p style="outline-style:dotted">dotnetfunda</p>
    <p style="outline-style:double">itfunda</p>
    <p style="outline-style:solid">farming funda</p>
    <p style="outline-style:none">kidsfunda</p>
    <p style="outline-style:ridge">SNarayan</p>
    <p style="outline-style:inset">fundoovideo</p>
    <p style="outline-style:outset">rameshwari.com</p>
    <p style="outline-style:hidden">dotnetfunda</p>

In the above code snippet we have defined the outline styles which are similar to the border properties 

We have different outline properties to create different outline shapes



It creates the color to the outline style line by using property outline-color;

 <p>Outline styles with colors</p>
    <p style="outline-style:dotted;outline-color:green">dotnetfunda</p>
    <p style="outline-style:double;outline-color:lemonchiffon;border:2px solid green;">itfunda</p>

Outline color

In the above code snippet we have outline style color which adds the color to the outline styles 



It adds the width to the outline element , it uses the property outline-width to increase the width of the outline element   

 <p>Outline styles with width</p>
    <p style="outline-style:dotted;outline-color:green">dotnetfunda</p>
    <p style="outline-style:double;outline-color:bisque;border:2px solid green;outline-width:8px">itfunda</p>

Outline width

In the above code snippet we have outline style width property, we have outline style with double and width as 8px which adds width of the outline style with color bisque



An outline is a line drawn around an element to create the outline for the element which looks like a border by using the property outline

 <p>Outline property</p>
    <p style="outline:blue dashed thick;border:3px dotted green;">TechFunda</p>


In the above code snippet we have defined the outline property which defines the outline with blue dashed thick 


 Views: 344 | Post Order: 122

Write for us