Distance from border to outline

outline-offset

Specify the distance from the element's outline ("outside-the-box") border to its normal border.

Property values

This property sets the distance to offset the outline from the element's normal border. Positive offsets place it outside the border. Negative values place it inside the border.

Unlike many other similar properties, the outline-offset property does not have corresponding top, right, bottom and left properties. Outline-offset rules can only be set for all four sides at once.

Use any of these font-relative typographic units to set the outline offset:

em em The font-size of the current font
rem relative em The font-size of the <html> element
lh line height The line-height of the current font
rlh relative line height The line-height of the <html> element
cap cap height The nominal height of the current font's capital letters
ex "x" The height of the current font's "x" glyph
ch "0" The advance measure (the width) of the current font's "0" glyph
ic ideograph count The advance measure (the width) of the current font's "水" ideograph

Or use any of these fixed size units which are independent of the current font:

in inch A size equal 96px
px pixels A size equal to 1/96 inch
pt point A size equal 1in/72 = 1.33px
pc pica A size equal 1in/6 = 12pt = 16px
cm centimeter A size equal to 96px/2.54 = 37.8px
mm millimeter A size equal to 96px/25.4 = 3.8px
Q quarter millimeter A size equal to 96px/1016 = 0.94px

Examples

/* an outline drawn outside the element's normal border */
outline-offset: 2px;

/* an outline drawn inside the element's normal border */
outline-offset: -2px;
outline-offset

style > framing > outline-offsetDistance from border to outline

🔎