CSS OUTLINE

CSS OUTLINE

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out". CSS has the following outline properties

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Note: Outline differs from borders! Unlike 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 is not affected by the width of the outline

CSS Outline Style

TThe 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
    •       
                    <p class="pdotted">DAKTIVAH WORLD >
<p class="pdashed"> DAKTIVAH WORLD  >
<p class="pdouble">DAKTIVAH WORLD >
<p class="pgroove">DAKTIVAH WORLD >
<p class="pridge">DAKTIVAH WORLD >
<p class="pinset">DAKTIVAH WORLD >
<p class="poutset">DAKTIVAH WORLD >
<style>
  .pdotted {outline-style: dotted;}
  .pdashed {outline-style: dashed;}
  .psolid {outline-style: solid;}
  .pdouble {outline-style: double;}
  .pgroove {outline-style: groove;}
  .pridge {outline-style: ridge;}
  .pinset {outline-style: inset;}
  .poutset {outline-style: outset;}
</style>

    Note: None of the other outline properties will have ANY effect unless the outline-style property is set!

    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)
    • hick (typically 5px)
    • A specific size (in px, pt, cm, em, etc)

    The following example shows some outlines with different widths: 

    •       
                    <p class="pdotted">A thin outline >
<p class="ex1">A thin outline  >
<p class="ex2">A medium outline  >
<p class="ex3">A thick outline >
<p class="ex4">4px thick outline >
<style>
  p.ex1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: thin;
  }
  
  p.ex2 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: medium;
  }
  
  p.ex3 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: thick;
  }
  
  p.ex4 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
    outline-width: 4px;
  }
</style>

    Popular tags

    CSS Button CSS Gradient CSS Responsive CSS Transition CSS Gallery

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1