Skip to content
Support Yumma CSS by starring us on GitHub!

Border Width

Controls the width of the borders of an element

Class Properties

b-0

border-width: 0px;

b-1

border-width: 1px;

b-2

border-width: 2px;

b-3

border-width: 3px;

b-4

border-width: 4px;

b-5

border-width: 5px;

b-6

border-width: 6px;

b-7

border-width: 7px;

b-8

border-width: 8px;
<div class="d-g g-16 gtc-4">
<div class="ai-c b-1 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">1px</div>
<div class="ai-c b-2 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">2px</div>
<div class="ai-c b-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3px</div>
<div class="ai-c b-4 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3px</div>
</div>

Border Bottom Width

Controls the width of the bottom border of an element.

Class Properties

bb-0

border-bottom-width: 0px;

bb-1

border-bottom-width: 1px;

bb-2

border-bottom-width: 2px;

bb-3

border-bottom-width: 3px;

bb-4

border-bottom-width: 4px;

bb-5

border-bottom-width: 5px;

bb-6

border-bottom-width: 6px;

bb-7

border-bottom-width: 7px;

bb-8

border-bottom-width: 8px;
<div class="ai-c bb-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3px</div>

Border Left Width

Controls the width of the left border of an element.

Class Properties

bl-0

border-left-width: 0px;

bl-1

border-left-width: 1px;

bl-2

border-left-width: 2px;

bl-3

border-left-width: 3px;

bl-4

border-left-width: 4px;

bl-5

border-left-width: 5px;

bl-6

border-left-width: 6px;

bl-7

border-left-width: 7px;

bl-8

border-left-width: 8px;
<div class="ai-c bl-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3px</div>

Border Right Width

Controls the width of the right border of an element.

Class Properties

br-0

border-right-width: 0px;

br-1

border-right-width: 1px;

br-2

border-right-width: 2px;

br-3

border-right-width: 3px;

br-4

border-right-width: 4px;

br-5

border-right-width: 5px;

br-6

border-right-width: 6px;

br-7

border-right-width: 7px;

br-8

border-right-width: 8px;
<div class="ai-c br-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3px</div>

Border Top Width

Controls the width of the top border of an element.

Class Properties

bt-0

border-top-width: 0px;

bt-1

border-top-width: 1px;

bt-2

border-top-width: 2px;

bt-3

border-top-width: 3px;

bt-4

border-top-width: 4px;

bt-5

border-top-width: 5px;

bt-6

border-top-width: 6px;

bt-7

border-top-width: 7px;

bt-8

border-top-width: 8px;
<div class="ai-c bt-3 bc-indigo bg-white d-f dim-16 jc-c tc-indigo">3px</div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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

<div class="b-1 md:b-2 ..."></div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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

<div class="b-1 h:b-2 ..."></div>