CSS Outline

       No comments

 




CSS Outline

An outline is a line drawn outside the element's border.

CSS has the following outline properties:
  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline
Note: Outline differs from borders! Unlike the border, the outline is drawn outside the element's border and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height are not affected by the width of the outline.

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:
  • dotted - Defines a dotted outline
  • dashed - Defines a dashed outline
  • solid - Defines a solid outline
  • double - Defines a double outline
  • groove - Defines a 3D grooved outline
  • ridge - Defines a 3D ridged outline
  • inset - Defines a 3D inset outline
  • outset - Defines a 3D outset outline
  • none - Defines no outline
  • hidden - Defines a hidden outline
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outline</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h2>The outline-style Property</h2>

    <p class="dotted">A dotted outline</p>
    <p class="dashed">A dashed outline</p>
    <p class="solid">A solid outline</p>
    <p class="double">A double outline</p>
    <p class="groove">A groove outline. The effect depends on the outline-color value.</p>
    <p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
    <p class="inset">An inset outline. The effect depends on the outline-color value.</p>
    <p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>

</html>
style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p {
    outline-color: red;
}

p.dotted {
    outline-style: dotted;
}

p.dashed {
    outline-style: dashed;
}

p.solid {
    outline-style: solid;
}

p.double {
    outline-style: double;
}

p.groove {
    outline-style: groove;
}

p.ridge {
    outline-style: ridge;
}

p.inset {
    outline-style: inset;
}

p.outset {
    outline-style: outset;
}


Output:


CSS Outline Width

The outline-width property specifies the width of the outline and can have one of the following values
  • thin (typically 1px)
  • medium (typically 3px)
  • thick (typically 5px)
  • A specific size (in px, pt, cm, em, etc.)
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outline</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h2>The outline-style Property</h2>

    <p class="dotted">A dotted outline</p>
    <p class="dashed">A dashed outline</p>
    <p class="solid">A solid outline</p>
</body>
</html>


style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p.dotted {
    border: 1px solid yellow;
    outline-style: solid;
    outline-width: thin;
    outline-color: red;
}

p.dashed {
    border: 1px solid yellow;
    outline-style: solid;
    outline-width: medium;
    outline-color: red;
}

p.solid {
    border: 3px solid yellow;
    outline-style: solid;
    outline-width: thick;
    outline-color: red;
}



output



CSS Outline Color

The outline-color property is used to set the color of the outline.

The color can be set by:
  • name - Specify a color name, like "red"
  • HEX - specify a hex value, like "#ff0000"
  • RGB - specify a RGB value, like "rgb(255,0,0)"
  • HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
  • invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

CSS Outline - Shorthand property

The outline property is a shorthand property for setting the following individual outline properties
  • outline-width
  • outline-style (required)
  • outline-color
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>outline</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h2>The outline-style Property</h2>

    <p class="dotted">outline</p>

</body>

</html>


style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p.dotted {
    border: 2px solid red;
    outline: 4px solid violet;
}



CSS Outline Offset

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.



0 Comments:

Post a Comment

Do leave your comments