Outline offset

It controls the space between an element's outline and its border.

outline-offset simply moves the outline outward without changing its appearance.

outline-offset values are available from 0 to 12rem.

Class list

Class name	Styles
co-outline-offset-0	outline-offset: 0rem
co-outline-offset-1	outline-offset: 1rem
co-outline-offset-2	outline-offset: 2rem
co-outline-offset-3	outline-offset: 3rem
co-outline-offset-4	outline-offset: 4rem
co-outline-offset-5	outline-offset: 5rem
co-outline-offset-6	outline-offset: 6rem
co-outline-offset-7	outline-offset: 7rem
co-outline-offset-8	outline-offset: 8rem
co-outline-offset-9	outline-offset: 9rem
co-outline-offset-10	outline-offset: 10rem
co-outline-offset-11	outline-offset: 11rem
co-outline-offset-12	outline-offset: 12rem

Example

<p class="co-outline-width-1 co-outline-base co-outline-solid co-outline-offset-1">
    This is an example for outline offset
</p>

Responsive design

All responsive outline-offset classes are available from co-outline-offset-1 to co-outline-offset-12

Class name
xs:co-outline-offsite-*
sm:co-outline-offsite-*
md:co-outline-offsite-*
lg:co-outline-offsite-*
xl:co-outline-offsite-*

Usage of responsive class

<p class="co-outline-solid sm:co-outline-offset-1">
    ....
</p>