What is CSS outline?
A line that is drawn around the HTML element and just outside of the border to make the element stand out is CSS outline. CSS outlines are are generally used to create focus on certain area like button, form, links, etc.
The CSS outline has following properties:
CSS border and
CSS outline are two different things. Border is part of HTML element's dimension but outline is not part of element's dimension.
What is difference between border and outline in CSS?
The outline looks very similar to border but it is different from borders. Difference between outline and border are as follows:
|CSS outline||CSS border|
|Outline don't take up space and can overlap other elements nearby||Borders do take space and does not overlap to other element|
|Outline do not change shape||Border change shape|
|Outline can't be given different values to different side of it, its same in all direction||Borders can be given different value to different side of the border|
|Outline may have different shapes other than rectangle||Borders are rectangle|
1. CSS Outline Style
The outline-style property sets a style of an element's outline. Default outline-style is
The outline-style can have one following values:
solid- It defines solid outline.
dashed- It defines a dashed outline.
dotted- It defines a dotted outline.
double- It defines double outline.
groove- It defines 3D grooved outline.
inset- It defines 3D inset outline.
outset- It defines 3D outset outline.
ridged- It defines a 3D ridged outline.
none- It defines no outline.
hidden- It defines a hidden outline.
2. CSS Outline Color
outline-color property sets color to outline. The color can be set by any methods like, color name, HEX value, RGB value, HSL value, etc.
Default color of outline is same as text color.
3. CSS Outline width
The outline-width property sets the thickness of element's outline. outline-width has following values:
- thin - It defines a outline of generally 1px.
- medium - It defines a outline of generally 3px.
- thick - It defines a outline of generally 5px.
- Any width - It defines a outline in px, pt, cm etc.
4. CSS Outline offset
The outline-offset property sets a gap between the border and outline. outline-offset value can be given in any valid unit. Default
outline-offset value is 0.
5. CSS Outline shorthand property
outline is a shorthand property for all CSS outline properties, which is used to set multiple outline property values in single line.
outline property we can specify one, two or all three values of
outline property, where
outline-style is required property ,
outline-color are optional property. Order of these three doesn't matter.