CSS Outline
An outline is a line drawn
outside the element's border.
This element has a black border and a green outline with a width
of 10px.
CSS Outline
An outline is a line that
is drawn around elements, OUTSIDE the borders, to make the element "stand
out".
CSS has the following
outline properties:
- outline-style
- outline-color
- outline-width
- outline-offset
- outline
Note: Outline
differs from borders! Unlike
border, the outline is drawn outside the element's border, and may overlap
other content. Also, the outline is NOT a part of the element's dimensions; the
element's total width and height is not affected by the width of the outline.
CSS Outline Style
The outline-style property specifies the style of the
outline, and can have one of the following values:
- dotted - Defines a dotted outline
- dashed - Defines a dashed outline
- solid - Defines a solid outline
- double - Defines a double outline
- groove - Defines a 3D grooved
outline
- ridge - Defines a 3D ridged
outline
- inset - Defines a 3D inset outline
- outset - Defines a 3D outset
outline
- none - Defines no outline
- hidden - Defines a hidden outline
The following example shows
the different outline-style values:
Example
Demonstration
of the different outline styles:
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;}
Result:
A dotted
outline.
A dashed
outline.
A solid
outline.
A double
outline.
A groove
outline. The effect depends on the outline-color value.
A ridge
outline. The effect depends on the outline-color value.
An inset
outline. The effect depends on the outline-color value.
An outset
outline. The effect depends on the outline-color value.
Note: None
of the other outline properties (which you will learn more about in the next
chapters) will have ANY effect unless the outline-style property
is set!
CSS Outline
Width
The outline-width property specifies the width of the
outline, and can have one of the following values:
- thin
(typically 1px)
- medium
(typically 3px)
- thick
(typically 5px)
- A
specific size (in px, pt, cm, em, etc)
The following example shows
some outlines with different widths:
A thin
outline.
A medium
outline.
A thick
outline.
A 4px
thick outline.
Example
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
CSS Outline
Color
The outline-color property is used to set the color of the
outline.
The color can be set by:
- name
- specify a color name, like "red"
- HEX
- specify a hex value, like "#ff0000"
- RGB
- specify a RGB value, like "rgb(255,0,0)"
- HSL
- specify a HSL value, like "hsl(0, 100%, 50%)"
- invert
- performs a color inversion (which ensures that the outline is visible,
regardless of color background)
The following example shows
some different outlines with different colors. Also notice that these elements
also have a thin black border inside the outline:
A solid
red outline.
A dotted
blue outline.
An outset
grey outline.
Example
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
HEX Values
The outline color can also
be specified using a hexadecimal value (HEX):
Example
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* red */
}
RGB Values
Or by using RGB values:
Example
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
HSL Values
You can also use HSL
values:
Example
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}
CSS Outline
Shorthand
CSS Outline - Shorthand property
The outline property is a shorthand property for setting the following
individual outline properties:
- outline-width
- outline-style (required)
- outline-color
The outline property is specified as one, two, or three values from the
list above. The order of the values does not matter.
The following example shows
some outlines specified with the shorthand outline property:
A dashed outline.
A dotted red outline.
A 5px solid yellow outline.
A thick ridge pink outline.
Example
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
CSS Outline
Offset
The outline-offset property adds space between an outline and
the edge/border of an element. The space between an element and its outline is
transparent.
The following example
specifies an outline 15px outside the border edge:
This
paragraph has an outline 15px outside the border edge.
Example
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
The following example shows
that the space between an element and its outline is transparent:
This
paragraph has an outline of 15px outside the border edge.
Example
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
All CSS Outline Properties
|
Property |
Description |
|
outline |
A shorthand property for
setting outline-width, outline-style, and outline-color in one declaration |
|
outline-color |
Sets the color of an
outline |
|
outline-offset |
Specifies the space
between an outline and the edge or border of an element |
|
outline-style |
Sets the style of an
outline |
|
outline-width |
Sets the width of an
outline |
