Open In App

CSS Outline

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

CSS Outline allows drawing a line outside the border of elements. It is used to set all the properties of the outline in a single declaration.

Syntax:

selector{
outline: outline-width outline-type outline-color;
/*outline: 2px solid grey;*/
}

Example: This example uses the outline property to create a dashed blue outline.

HTML




<!DOCTYPE html>
<html>
    <head>
        <style>
            .dotted {
                outline: 2px dashed blue;
                color: green;
                text-align: center;
            }
        </style>
    </head>
 
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>Outline Property</h3>
        <p class="dotted">
            A Computer Science portal for geeks.
        </p>
    </body>
</html>


Output:

CSS-Outline-example-output

CSS Outline Example output

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.

CSS Outline Properties

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

Outline-style

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|double|groove|ridge|inset|outset|initial|inherit;

Outline-color

Outline-color is used to sets the outline color of an element. The color can be set by its name ie., rgb value or a hex value, etc. If absent then the default color will be the current color.

Syntax:

outline-color: <color> | invert | inherit;

Example: This example illustrates the Outline property where the color is set to the specific color value and outline style is solid.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
    p {
        border: solid orange 4px;
        outline-style: solid;
        outline-color: green;
        text-align: center;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Outline Property</h3>
    <p>A Computer Science portal for geeks.</p>
 
</body>
</html>


Output:

CSS outline color and style example output

Outline-width

Outline-width is used to specify the width of this outline for a specific element. The width of the outline can be set by specifying the size of the width in px, cm, pt, etc, or by using terms like a thin, thick, medium.  If absent then the default width will be the medium.

Syntax:

outline-width: medium|thin|thick|length|initial|inherit;

Outline-offset

Outline-offset Property sets the amount of space between an outline and the edge or border of an element. An outline is a line drawn around elements outside the border edge. The space between the element and its outline is transparent. Also, the outline may be non-rectangular. The default value is 0.

Syntax:

outline-offset: length|initial|inherit;

Example: This example illustrates the Outline property where the offset is set to 3 px and width as 5px..

HTML




<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                border: solid green 3px;
                outline-style: solid;
                outline-width: 5px;
                outline-offset: 3px;
                text-align: center;
            }
        </style>
    </head>
 
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>Outline Property</h3>
        <p>A Computer Science portal for geeks.</p>
    </body>
</html>


Output:

CSS-outline-width-and-offset-example-output

CSS Outline offset and width example

Supported Browsers: The browser supported by CSS Grid Layout Module are listed below.



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads