CSS Outline

Unique beauty

 CSS Outline:

The outline CSS shorthand property allows drawing a line around the element, outside the border. It is used to set all the properties of the outline in a single declaration. CSS outline properties can be categorized into 4 types, namely, Outline-style, Outline-color, Outline-width & Outline-offset. We will discuss all the types of outline properties sequentially through the examples.

Properties: 

There are lots of properties comes under the CSS outline collection all of them are well described with the example.

Outline-style: It is used to set the appearance of the outline of an element ie., it tells us the style or type of outline. Any other outline property cannot be accessed without setting the outline-style. If absent then the default style will be set to none. 

Syntax:

outline-style: auto|none|dotted|dashed|solid

Example: This example illustrates the Outline property where the style is set to the dotted lines.


<!DOCTYPE html>
<html>
<head>
    <style>
    .dotted {
        outline-style: dotted;
        color: green;
        text-align: center;
    }
    </style>
</head>
  
<body >
    <h1>Skin care</h1>
    <h3>Outline Property</h3>
    <p class="dotted">Protect your Skin.</p>
  
</body>
</html>

Output:


Skin care

   

     
Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send