Skip to content

Outline Style

Controls the outline style of an element.

Class Properties

os-none

outline-style: none;

os-d

outline-style: dashed;

os-h

outline-style: hidden;

os-s

outline-style: solid;
<div class="d-g g-16 gtc-4">
<button class="b-1 bc-l-silver-6 bg-white fw-600 oc-cyan oo-1 os-none px-5 py-1 rad-1">Subscribe</button>
<button class="b-1 bc-l-silver-6 bg-white fw-600 oc-cyan oo-1 os-d px-5 py-1 rad-1">Subscribe</button>
<button class="b-1 bc-l-silver-6 bg-white fw-600 oc-cyan oo-1 os-h px-5 py-1 rad-1">Subscribe</button>
<button class="b-1 bc-l-silver-6 bg-white fw-600 oc-cyan oo-1 os-s px-5 py-1 rad-1">Subscribe</button>
</div>

Using breakpoints

Using responsive breakpoints like sm:os-*, md:os-*, lg:os-*, and xxl:os-* allows targeting specific utilities in different viewports.

<div class="os-h md:os-s ..."></div>

Using variants

Using :hover variants such as h:os-* allows you to override elements and change their values when hovering over them.

<div class="os-h h:os-s ..."></div>