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-width
outline-style
outline-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
