Skip to main content

Class-outline

Utilities for controlling the duration of CSS outlines.

Use the v-o-* utilities to control the outline of an element. You can use
the feat: custom feature if you want the outline to suit your needs.

Table list outlines​

Class nameProperties
v-o-1 outline: 1px;
v-o-2 outline: 2px;
v-o-3 outline: 3px;
v-o-4 outline: 4px;
v-o-top-1 outline-top: 1px;
v-o-top-2 outline-top: 2px;
v-o-top-3 outline-top: 3px;
v-o-top-4 outline-top: 4px;
v-o-left-1 outline-left: 1px;
v-o-left-2 outline-left: 2px;
v-o-left-3 outline-left: 3px;
v-o-left-4 outline-left: 4px;
v-o-right-1 outline-right: 1px;
v-o-right-2 outline-right: 2px;
v-o-right-3 outline-right: 3px;
v-o-right-4 outline-right: 4px;
v-o-bottom-1 outline-bottom: 1px;
v-o-bottom-2 outline-bottom: 2px;
v-o-bottom-3 outline-bottom: 3px;
v-o-bottom-4 outline-bottom: 4px;

The table above presents several types of outlines with different variants.

Example Code​

index.html
<div>
    <div class="v-o-1"> 
    </div>
    <div class="v-o-2"> 
    </div>
    <div class="v-o-3"> 
    </div>
    <div class="v-o-4"> 
    </div>
</div>