Contents
Defining the outline in CSS
To draw an outline around an element, you need to use the outline CSS property:
CSS outline property syntax
This property is actually a shorthand for three subproperties that define an outline in CSS:
outline-widthoutline-styleoutline-color
As with all CSS shorthands, you need to omit the names of the subproperties and only list their values:
outline: width style color;
| Subproperty | Default value | Definition |
|---|---|---|
outline‑width |
medium |
CSS outline thickness defined in keywords (thin, medium, or thick) or length units |
outline‑style |
none |
CSS outline style defined in keywords (auto, none, dotted, dashed, solid, double, groove, ridge, inset, or outset) |
outline‑color |
currentColor or invert |
CSS outline color defined in keywords (currentColor, or invert), color names, RGB, RGBA, HEX, HSL or HSLA values |
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Border and outline in CSS
An outline is similar to a border – however, there are a few differences. Unlike borders, outlines do not take up space in CSS. They also don't have to be rectangle-shaped.
One element can have both a border and an outline in CSS. You can specify the offset between them by using the outline-offset property:
div {
border: 1px solid green; /* Set border properties */
outline: 1px solid hotpink; /* Set outline properties */
outline-offset: 15px; /* Set the distance between the outline and border*/
}
Browser support
Chrome
Edge
Firefox
IE
Opera
Safari
Mobile browser support
Chrome
Firefox
Opera