What Is The Difference between Borders and Outline in Css

admin_img Posted By Bajarangi soft , Posted On 29-09-2020

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out",The outline-width property specifies the width of the outline, and can have one of the following values,The outline-color property is used to set the color of the outline,The outline property is a shorthand property for setting the following individual outline properties,The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

CSS Outline

1.Create a Html Doc with Outline property using Css

<!DOCTYPE html>
<html>
<head>
    <style>
        p.ex1 {
            border: 1px solid mediumspringgreen;
            outline-style: solid;
            outline-color: mediumvioletred;
            outline-width: thin;
            outline-offset: 15px;
        }

        p.ex2 {
            border: 1px solid darkred;
            outline-style: solid;
            outline-color:blue;
            outline-width: medium;
        }

        p.ex3 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: green;
            outline-width: thick;
        }

        p.ex4 {
            border: 1px solid yellow;
            outline-style: solid;
            outline-color: invert;
            outline-width: medium;
        }
    </style>
</head>
<body>

<h2>The outline-width Property</h2>

<h2>offset outline</h2>
<p class="ex1">A thin outline.</p><br>

<p class="ex2">A medium outline.</p><br>
<p class="ex3">A thick outline.</p><br>
<p class="ex4">A 4px thick outline.</p>

</body>
</html>
2.Differences between Outline and border
<!DOCTYPE html>
<html>
<head>
    <style>
        p.dotted {border-style: dotted;}
        p.dashed {border-style: dashed;}
        p.solid {border-style: solid;}
        p.double {border-style: double;}
        p.groove {border-style: groove;}
        p.ridge {border-style: ridge;}
        p.inset {border-style: inset;}
        p.outset {border-style: outset;}
        p.none {border-style: none;}
        p.hidden {border-style: hidden;}
        p.mix {border-style: dotted dashed solid double;}
    </style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">Bajarangi Soft.</p>
<p class="dashed">Bajarangi Soft.</p>
<p class="solid">Bajarangi Soft.</p>
<p class="double">Bajarangi Soft.</p>
<p class="groove">Bajarangi Soft.</p>
<p class="ridge">Bajarangi Soft.</p>
<p class="inset">Bajarangi Soft.</p>
<p class="outset">Bajarangi Soft.</p>
<p class="none">Bajarangi Soft.</p>
<p class="hidden">Bajarangi Soft.</p>
<p class="mix">Bajarangi Soft.</p>

</body>
</html>

Related Post