The outline shorthand sets three outline properties at once: line width, line style, and line color. Unlike border, outline does not take space in the layout and does not affect box size.button:focus {
outline: 2px solid royalblue;
}:focus-visible {
outline: thick dashed currentcolor;
outline-offset: 4px;
}min:0max:9999step:1units:px | em | remthinThin line width.mediumMedium line width (default).thickThick line width.autoBrowser-defined default style (often solid or platform focus indicator).noneNo outline (default of <line-style>).dottedDotted line.dashedDashed line.solidSolid line.doubleDouble line.groove3D grooved effect.ridge3D ridged effect.insetInset-looking border.outsetOutset-looking border.currentcolorUses the current color property value.rgb()RGB color function.hsl()HSL color function.CSS Basic User Interface Module Level 4Working Draft<line-width> <line-style> <color>W3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
