Box Sizing

Utility	Properties
bs-bb	box-sizing: border-box;
bs-cb	box-sizing: content-box;

Border Box

This example sets the box sizing to border-box. The element’s width and height include padding and borders.

Stylecent uses the border-box CSS property by default. Learn more about it in the docs.

Box

<div class="d-26 bs-bb p-8" id="area">
  <div class="ai-c bg-indigo d-f d-full jc-c tc-white">Box</div>
</div>

Content Box

Initial value

This example sets the box sizing to content-box. The element’s width and height do not include padding and borders.

Content

<div class="d-26 bs-cb p-8" id="area">
  <div class="ai-c bg-indigo d-f d-full jc-c tc-white">Content</div>
</div>

Conditional styles

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

Media modifier

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

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

Hover modifier

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

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