Introduction to the CSS outline properties: A Guide to Styling Your Webpage with examples
What is CSS Outline?
CSS Outline Properties
- outline-style: This property defines the style of the outline, such as solid, dotted, or dashed.
- outline-color: This property defines the color of the outline.
- outline-width: This property defines the width of the outline.
- outline-offset: This property defines the distance between the outline and the element's border.
Note: Outline differs from borders! Unlike the 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.{alertSuccess}
CSS Outline Style
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 |
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;}{codeBox}
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.
CSS Outline Width
- thin (typically 1px)
- medium (typically 3px)
- thick (typically 5px)
- A specific size (in px, pt, cm, em, etc)
A thin outline.
A medium outline.
A thick outline.
A 4px thick outline.
<!DOCTYPE html><html><head><style>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;}</style></head><body><h2>The outline-width Property</h2><p class="ex1">A thin outline.</p><p class="ex2">A medium outline.</p><p class="ex3">A thick outline.</p><p class="ex4">A 4px thick outline.</p></body></html>{codeBox}
CSS Outline Color
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) |
A solid red outline.
A dotted blue outline.
An outset grey outline.
<!DOCTYPE html><html><head><style>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;}</style></head><body><h2>The outline-color Property</h2><p>The outline-color property is used to set the color of the outline.</p><p class="ex1">A solid red outline.</p><p class="ex2">A dotted blue outline.</p><p class="ex3">An outset grey outline.</p></body></html>{codeBox}
HEX Values
p.ex1 {outline-style: solid;outline-color: #ff0000; /* red */}{codeBox}
RGB Values
p.ex1 {outline-style: solid;outline-color: rgb(255, 0, 0); /* red */}{codeBox}
HSL Values
p.ex1 {outline-style: solid;outline-color: hsl(0, 100%, 50%); /* red */}{codeBox}
CSS Outline - Shorthand property
- outline-width
- outline-style (required)
- outline-color
A dashed outline.
A dotted red outline.
A 5px solid yellow outline.
A thick ridge pink outline.
p.ex1 {outline: dashed;}p.ex2 {outline: dotted red;}p.ex3 {outline: 5px solid yellow;}p.ex4 {outline: thick ridge pink;}{codeBox}
outline-offset - CSS: Cascading Style Sheets
This paragraph has an outline 15px outside the border edge.
p {margin: 30px;border: 1px solid black;outline: 1px solid red;outline-offset: 15px;}{codeBox}
This paragraph has an outline of 15px outside the border edge.
p {margin: 30px;background: yellow;border: 1px solid black;outline: 1px solid red;outline-offset: 15px;}{codeBox}
CSS outline properties: best practices
- Use outlines appropriately: Outlines should be used to highlight interactive elements, such as links, buttons, and form controls. They should not be used for decorative purposes or to add borders around non-interactive elements.
- Customize outlines: Outlines should be customized to fit your website's design and aesthetic. This can be done by adjusting the width, color, and style of the outline.
- Keep outlines visible: Outlines should not be hidden using CSS, as this can create accessibility issues for users who rely on keyboard navigation. Outlines should be visible and used appropriately.
- Test with keyboard navigation: When using outlines to improve accessibility, it's important to test your website with keyboard navigation to ensure that users can easily see and interact with the outlined elements.
- Don't make outlines too thick: Outlines that are too thick can overpower other design elements on your website and make it difficult for users to distinguish between elements. As a general rule, outlines should be no more than 2-3 pixels thick.
CSS outline properties: avoid common mistakes
- Hiding outlines: Outlines should not be hidden using CSS, as this can create accessibility issues for users who rely on keyboard navigation. Outlines should be visible and used appropriately.
- Making outlines too thick: Outlines that are too thick can overpower other design elements on your website and make it difficult for users to distinguish between elements. As a general rule, outlines should be no more than 2-3 pixels thick.
- Using outlines for decorative purposes: Outlines should be used to highlight interactive elements, such as links, buttons, and form controls. They should not be used for decorative purposes or to add borders around non-interactive elements.
- Overriding user preferences: Some users may have specific preferences for the appearance of outlines or may have disabled them altogether. It's important to avoid overriding these preferences and ensure that your website is accessible for all users.
- Applying outlines to non-interactive elements: Outlines should only be applied to interactive elements, as applying them to non-interactive elements can be confusing for users and create unnecessary visual clutter.