Background Origin

Utility	Properties
bo-bb	background-origin: border-box;
bo-cb	background-origin: content-box;
bo-pb	background-origin: padding-box;

Border Box

This example sets the background origin to border-box. The background positioning area includes the border area.

<div class="b-3 b-d bc-bb bo-bb bc-indigo-4 bg-indigo d-20 p-2 rad-1"></div>

Content Box

This example sets the background origin to content-box. The background positioning area is confined to the content area, excluding padding and borders.

<div class="b-3 b-d bc-cb bo-cb bc-indigo-4 bg-indigo d-20 p-2 rad-1"></div>

Padding Box

This example sets the background origin to padding-box. The background positioning area extends to the outer edge of the padding, but does not include the border.

<div class="b-3 b-d bc-pb bo-pb bc-indigo-4 bg-indigo d-20 p-2 rad-1"></div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:bo-*,md:bo-*, lg:bo-*, and xxl:bo-* allows targeting specific utilities in different viewports.

<div class="bo-cb md:bo-bb ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:bo-* utility to override elements and change their values when hovering over them.

<div class="bo-cb h:bo-bb ..."></div>