@codeswithpankaj

CSS outline

The CSS outline property is a shorthand property for setting one or more of the individual outline properties (outline-style, outline-width, and outline-color) in a single declaration. It is used to draw a line around elements outside the border edge to make them stand out. Outlines do not take up space and do not affect the layout of the document.

1. Outline Style

The outline-style property specifies the style of the outline. It can take the following values: none, solid, dotted, dashed, double, groove, ridge, inset, and outset.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Outline Style - codeswithpankaj.com</title>
    <style>
        .outline-style-example {
            outline-style: solid;
            outline-width: 2px;
            outline-color: blue;
        }
    </style>
</head>
<body>
    <h1 class="outline-style-example">This is an example of a solid outline - codeswithpankaj</h1>
</body>
</html>

In this example, a solid blue outline with a width of 2px is applied to the heading.

2. Outline Width

The outline-width property specifies the width of the outline. It can take values like thin, medium, thick, or a specific size (e.g., px, em).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Outline Width - codeswithpankaj.com</title>
    <style>
        .outline-width-example {
            outline-style: solid;
            outline-width: 5px;
            outline-color: red;
        }
    </style>
</head>
<body>
    <p class="outline-width-example">This paragraph has a thick outline - codeswithpankaj</p>
</body>
</html>

Here, a solid red outline with a width of 5px is applied to the paragraph.

3. Outline Color

The outline-color property sets the color of the outline. It can take any color value, such as color name, hex value, rgb value, rgba value, etc.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Outline Color - codeswithpankaj.com</title>
    <style>
        .outline-color-example {
            outline-style: dotted;
            outline-width: 3px;
            outline-color: green;
        }
    </style>
</head>
<body>
    <button class="outline-color-example">Button with green dotted outline - codeswithpankaj</button>
</body>
</html>

In this example, a green dotted outline with a width of 3px is applied to the button.

4. Shorthand Outline Property

The outline shorthand property sets all the outline properties in a single declaration: outline: [outline-width] [outline-style] [outline-color];.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Outline Shorthand - codeswithpankaj.com</title>
    <style>
        .outline-shorthand-example {
            outline: 4px dashed purple;
        }
    </style>
</head>
<body>
    <div class="outline-shorthand-example">This div has a purple dashed outline - codeswithpankaj</div>
</body>
</html>

Here, a purple dashed outline with a width of 4px is applied to the div element using the shorthand property.

5. Outline Offset

The outline-offset property adds space between the outline and the edge or border of an element. This property is helpful for creating some visual separation.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Outline Offset - codeswithpankaj.com</title>
    <style>
        .outline-offset-example {
            border: 1px solid black;
            outline: 3px solid orange;
            outline-offset: 10px;
        }
    </style>
</head>
<body>
    <div class="outline-offset-example">This div has an outline offset - codeswithpankaj</div>
</body>
</html>

In this example, an orange solid outline with a width of 3px is applied to the div element, and it is offset by 10px from the border of the element.

This tutorial covers the basics of the CSS outline property. For more tutorials and examples, visit codeswithpankaj.com.

PreviousCSS Height, Width and Max-widthNextCSS Text

Last updated