CSS - Outline Style


CSS - Outline Style

  • The outline-style property specifies the certain style for the line (solid, dotted and double) that goes around an element.

There are several types of styles for the outline they are : 

  • none - Simply no outline
  • dotted - Depicts a dotted outline
  • dashed - Depicts a dashed outline
  • solid - Depicts a solid outline
  • double - Depicts a double layer outline(Thick Solid)
  • groove - Outline looks like 3d grooved (narrow cut) line.
  • ridge - Looks Completely opposite to groove outline.
  • inset - Outline looks firmly attached to your webpage.
  • Outset - Outline look like it is coming out of the lower screen.
  • hidden - Invisible outline same as none.

Sample Code :

<!DOCTYPE html>
<html>
    <body>
        <p style="outline-width: thin; outline-style: solid;">
        Welcome to WikiTechy.com
        </p>
        <br />
        <p style="outline-width: thick; outline-style: dashed;">
        Fin solutions for technology errors.
        </p>
        <br />
        <p style="outline-width: 5px;outline-style:dotted;">
        Best E-Learning Website in the world.
        </p>
        <br />
        <p style="outline-width: 5px;outline-style:ridge;">
        Where we can learn technologies easily here.
        </p>
        <br />
        <p style="outline-width: 5px;outline-style:groove;">
        Execute the Code pragmatically @wikiTechy.com
        </p>
        <br />
    </body>
</html>

Code Explanation :


    In CSS, outline–style: solid for an <p> element will display a solid outline around it.

    Outline-style: dashed for an element will display a dashed outline around it.

    Outline-style: dotted for an element will display an outline in dotted lines.

    Outline-style: ridge property is used to apply a narrow outline around an element.

    Outline-style: groove property is used to display a 3D grooved outline. For better understanding we have used outline-color property

Note : In order to understand ridge and groove we need to add outline-color which we will learn in next chapter.

Output :

  • The output of the above example is displayed in the browser window is shown below.


    Here the paragraph text “Welcome to Wikitechy.com” will have solid outline around it.

    Similarly dashed outline will be displayed around the text “Find solutions for technology errors”.

    The text “Best E-Learning Website in the world.” will appear in browser window with dotted outline around it.

    The Text “Where you can learn technologies easily.” will have ridged outline (narrow outline) around it.

    Over here, the paragraph “Execute the code pragmatically @wikitechy.com“will be displayed in the browser window with 3d grooved outline.