- CSS Outline Style
- CSS Outline Width
- CSS Outline Color
- CSS Outline - Shorthand property
- CSS Outline Offset
- Previous Section
- Next Section
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:
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
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
CSS Outline Width
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)
CSS Outline Color
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)"
CSS Outline - Shorthand property
outline property is a shorthand property for setting the following individual outline properties:
outline property is specified as one, two, or three values from the list above. The order of the values does not matter.
CSS Outline Offset
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.
Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact email@example.com for inquiries.