Border radius

The border radius class sets the border-radius property. It controls how round the corners of an element’s border appear.

Overview

b-radius-sm

border-radius: 0.125rem;

b-radius-md

border-radius: 0.375rem;

b-radius-lg

border-radius: 3rem;

b-radius-xl

border-radius: 100%;

Examples

Small
b-radius-sm

<p class="b-radius-sm">
  This element has a small border radius.
</p>

Medium
b-radius-md

<p class="b-radius-md">
  This element has a medium border radius.
</p>

Large
b-radius-lg

<p class="b-radius-lg">
  This element has a large border radius.
</p>

Extra large
b-radius-xl

<p class="b-radius-xl">
  This element has an extra large border radius.
</p>

Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:

• xs: > 480px
• sm: > 640px
• md: > 768px
• lg: > 1024px
• xl: > 1280px

  
<div class="xs:b-radius-md ...">
  ...
</div>
  

Learn more about the responsive layout prefix.

Apply this style to specific states Use a state prefix to apply this class only to a specified interaction state. The available states are:

• hover
• focus

  
<div class="hover:b-radius-md ...">
  ...
</div>
  

Learn more about the state prefix.