CSS - Outline Width


CSS - Outline Width

  • CSS outline is a border around the border.
  • Outlines are different when compared to borders in following ways. 
    • Outline is always the same on all sides.
    • We cannot specify different values for every sides of an element.

Outline Property :

  • There are three different types of properties in CSS outline they are:
    • outline-width
    • outline-style
    • outline-color

Outline Width :

  • The outline width property determines the width of the outline to be added to the container. Its value should be in length (px, pt etc.,) or one of the qualities like thin, medium, or thick.

Sample Code :

<!DOCTYPE html>
<html>
    <head>
    </head>
        <body>
            <p style="outline-width: thin; outline-style: solid;">
            Welcome To WikiTechy.com
            </p>
            <br />
            <p style="outline-width: thick; outline-style: solid;">
            Where You Can Learn All The Technologies.
            </p>
            <br />  
            <p style="outline-width:2px; outline-style: solid;">
            Best E-Learning Website In The World.
            </p>
        </body>
</html>

Code Explanation :


    Applying the outline width property for <p> tag stating that the width of the outline around the <p> contents is thin

Note : Using Inline CSS we are applying a specific styles to a particular element.

    Similarly, we are applying outline width: thick for a <p> element which will have an outline around its text that looks thicker and stronger than the first outline. 

    Here we also directly fix the outline width property value using measurement units like px, pt and % etc. 

Output :


    Here, the paragraph text “Welcome To wikitechy.com” will have a thin outline around it which is displayed in the browser window.

    The Paragraph “Where You Can Learn All the Technologies” will have a thick outline width since we specified outline-width: thick in CSS.

    Similarly, outline around the text “Best E-Learning Website in the World.”   is specified in 3px (pixels) as shown in the output.