Utilities for controlling an element's outline.
Use d-ol-{focusring|focusring-outset|none} to change an element's outline.
<dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-code--sm d-ol-focusring"> .d-ol-focusring </dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-code--sm d-ol-focusring-outset"> .d-ol-focusring-outset </dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-code--sm d-ol-none"> .d-ol-none </dt-stack>
d-ol-focusring to add a focus ring within the edge of an element. Use this utility when an element reaches the edge of its parent or its overflow property is set to hidden.d-ol-focusring-outset to add a focus ring outside the edge of an element.d-ol-none to remove an element's focus ring.Use h:d-ol-{focusring|focusring-outset|none} to change an element's outline on :hover.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary h:d-ol-focusring-outset">outset</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary h:d-ol-focusring">inset</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary h:d-ol-none">none</dt-button>
Use fv:d-ol-{focusring|focusring-outset|none} to change an element's outline on :focus-visible when focused by keyboard.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary fv:d-ol-focusring-outset">outset</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary fv:d-ol-focusring">inset</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary fv:d-ol-none">none</dt-button>
Use f:d-ol-{focusring|focusring-outset|none} to change an element's outline on :focus and :focus-within.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary f:d-ol-focusring-outset">outset</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary f:d-ol-focusring">inset</dt-button> <dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary f:d-ol-none">none</dt-button>
Class
|
Output
|
|---|---|
| .d-ol-focusring | box-shadow: var(--dt-shadow-focus) !important; |
| .d-ol-focusring-inset | box-shadow: var(--dt-shadow-focus-inset) !important; |
| .d-ol-focusring-outset | box-shadow: var(--dt-shadow-focus-outset) !important; |
| .d-ol-none | box-shadow: none !important; |
Outline documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope