CSS Tutorial

outline: A shorthand property for setting outline-width, outline-style, and outline-color in one declaration.
outline-style: Specifies the style of an outline.
outline-color: Specifies the color of an outline.
outline-width: Specifies the outline width.
outline-offset: Specifies the space between an outline and the edge or border of an element.

CSS Outline: Example

<head>
   <style>
       p {
           border: 2px solid #ff6a00;
           outline: 5px dotted green;
       }
   </style>
</head>
<body>
   <p>Hello! This is Text Paragraph with CSS outline property.</p>
</body>

Output

Hello! This is Text Paragraph with CSS outline property.

Difference Between Outline & Border

The outline is drawn a line of outside the element's border, and may overlap other content.
The outline is NOT a part of the element's dimensions BUT the border is a part of element's dimension.
The element's total width and height is not affected by the width of the outline.

1. CSS Outline Style

dotted
dashed
solid
groove: Defines a 3D grooved outline
ridge: Defines a 3D ridged outline
inset: Defines a 3D insetd outline
outset: Defines a 3D outset outline
double
none
hidden

Example: Outline Style

<head>
   <style>
       p.dotted {
           outline-style: dotted;
       }

       p.dashed {
           outline-style: dashed;
       }

       p.solid {
           outline-style: solid;
       }

       p.double {
           outline-style: double;
       }

       p.groove {
           outline-style: groove;
       }

       p.ridge {
           outline-style: ridge;
       }

       p.inset {
           outline-style: inset;
       }

       p.outset {
           outline-style: outset;
       }
   </style>
</head>
<body>
    <p class="dotted">This is Text Paragraph and style with dotted outline.</p>
    <p class="dashed">This is Text Paragraph and style with dashed outline.</p>
    <p class="solid">This is Text Paragraph and style with solid outline.</p>
    <p class="double">This is Text Paragraph and style with double outline.</p>
    <p class="groove">This is Text Paragraph and style with groove outline.</p>
    <p class="ridge">This is Text Paragraph and style with ridge outline.</p>
    <p class="inset">This is Text Paragraph and style with inset outline.</p>
    <p class="outset">This is Text Paragraph and style with outset outline.</p>
</body>

Output

This is Text Paragraph and style with dotted outline.

This is Text Paragraph and style with dashed outline.

This is Text Paragraph and style with solid outline.

This is Text Paragraph and style with double outline.

This is Text Paragraph and style with groove outline.

This is Text Paragraph and style with ridge outline.

This is Text Paragraph and style with inset outline.

This is Text Paragraph and style with outset outline.

2. CSS Outline Color

The CSS outline-color property is used to set the color of the outline.

Outline Color Set Like

name: like "red", "green", "blue", etc.
RGB: RGB value like "rgb(255,0,0)", "rgb(0,0,0)", etc.
Hex: Hex value like "#fffff", "#ff0000", "#000000", etc.
invert: color invert use to ensure that the outline is visible.

Example: Outline Color

<head>
   <style>
       p.color {
           outline-style: solid;
           outline-color: purple;
           border: 2px solid red;
       }

       p.invr {
           outline-style: solid;
           outline-color: invert;
           border: 2px solid #ff6a00;
       }
   </style>
</head>
<body>
    <p class="color">This is Text Paragraph of outline with name of color.</p>
    <p class="invr">This is Text Paragraph of outline with invert.</p>
</body>

Output

This is Text Paragraph of outline with name of color.

This is Text Paragraph of outline with invert.

3. CSS Outline Width

The CSS outline-width property is used to set the width of the outline.

Types of Width Thickness

Thin: Like (1px)
Medium: Like (3px)
Thick: Like (5px)
Specific Size: Like (in px, pt, cm, em, etc.)

Example: Outline Width

<head>
   <style>
       p.thin {
           outline-style: solid;
           outline-color: purple;
           border: 2px solid red;
           outline-width: thin;
       }

       p.thick {
           outline-style: solid;
           outline-color: invert;
           border: 2px solid #ff6a00;
           outline-width: thick;
       }
   </style>
</head>
<body>
    <p class="thin">The outline width Thin</p>
    <p class="thick">The outline width Thick</p>
</body>

Output

The outline width Thin

The outline width Thick

4. CSS Outline Offset

The outline-offset is used to adds space between an outline and the edge/border of an element.

Example: Outline Offset

<head>
   <style>
       p {
           outline: 1px solid #808080;
           border: 1px solid red;
           background-color: pink;
           margin: 30px;
           outline-offset: 20px;
       }
   </style>
</head>
<body>
    <p>Hello! This is a Paragraph outline offset.</p>
</body>

Output

Hello! This is a Paragraph outline offset.

← Previous Next →

CSS Tutorial

CSS Tutorials

CSS Outline Properties

Outline Properties

CSS Outline: Example

Output

Difference Between Outline & Border

1. CSS Outline Style

Example: Outline Style

Output

2. CSS Outline Color

Outline Color Set Like

Example: Outline Color

Output

3. CSS Outline Width

Types of Width Thickness

Example: Outline Width

Output

4. CSS Outline Offset

Example: Outline Offset

Output

Related Topics

Related Topics

Policy & Disclosure

Popular

LifeStyle & Fun