CSS – Outlines

  • CSS – Outlines

    • CSS – Outlines Lesson

      To specify an outline within an element, different properties in the HTML page can be given using CSS. These properties are as below,

      • outline-color: it specifies the outline’s color as color’s name, hex color code and RGB value.

      • outline-style: it specifies the type of the line like solid, double line, dashed line, dotted, inset, outset, hidden, etc. 

      • outline-width: it determines the width of the outline like thin, medium, thick, in px unit, etc.

      • outline: this property sets all three types of features in one statement.



      Example:

      <html>

         <head>

         </head>

           <body>

            <p style = "outline-width:thin; outline-style:solid;outline-color:blue">

               This text is having a thin outline, solid style and blue colored.

            </p>

            <br />

              <p style = "outline-width:thick; outline-style:dashed;outline-color:#009990">

               This text is having a thick outline, dashed style and hex-color.

            </p>

            <br />

              <p style = "outline-width:10px; outline-style:dotted;outline-color:rgb(7,80,250)">

               This text is having 10x outline, dotted style and rgb-color.

            </p>

             <br />

            <p style = "outline:3px dashed rgb(10,55,250);">

               This text is having 3px dashed blue outline- shorthand.

            </p>

         </body>

      </html>



      Output:


      Quiz:


      Quiz 1: How can you change various properties of outlines using CSS?

      Quiz 2: What is the difference between border and outline?


CSS – Cursors
CSS – Dimension