---

Search posts under CSS3:

---

Outlines in CSS3

How to create the outline using CSS

Outlines

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.

Outline-style

 <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

output

Outline-color

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 

output

Outline-width

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

output

Outline

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>

Outline

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

output