Skip to content
Sunsetting Yumma CSS Intellisense extension 👋

Border Radius

Controls the radius of the borders of an element.

Class Properties

rad-0

border-radius: 0rem;

rad-1

border-radius: 0.25rem;

rad-2

border-radius: 0.5rem;

rad-3

border-radius: 0.75rem;

rad-4

border-radius: 1rem;

rad-5

border-radius: 1.25rem;

rad-6

border-radius: 1.5rem;

rad-7

border-radius: 1.75rem;

rad-8

border-radius: 2rem;

rad-full

border-radius: 100%;

rad-half

border-radius: 50%;

This example showcases various border radius values: 0.25rem, 0.5rem, and 0.75rem. The element will have slightly rounded corners, moderately rounded corners, and more pronounced rounded corners, respectively.

<div class="d-g g-16 gtc-1 sm:gtc-3">
<div class="bg-indigo dim-16 rad-1"></div>
<div class="bg-indigo dim-16 rad-2"></div>
<div class="bg-indigo dim-16 rad-3"></div>
</div>

Bottom Left Radius

This example sets the bottom left border radius to 0.5rem. The element will have moderately rounded corners at the bottom left.

Class Properties

rad-bl-0

border-bottom-left-radius: 0rem;

rad-bl-1

border-bottom-left-radius: 0.25rem;

rad-bl-2

border-bottom-left-radius: 0.5rem;

rad-bl-3

border-bottom-left-radius: 0.75rem;

rad-bl-4

border-bottom-left-radius: 1rem;

rad-bl-5

border-bottom-left-radius: 1.25rem;

rad-bl-6

border-bottom-left-radius: 1.5rem;

rad-bl-7

border-bottom-left-radius: 1.75rem;

rad-bl-8

border-bottom-left-radius: 2rem;

rad-bl-full

border-bottom-left-radius: 100%;

rad-bl-half

border-bottom-left-radius: 50%;
<div class="bg-indigo dim-16 rad-bl-2"></div>

Bottom Right Radius

This example sets the bottom right border radius to 0.5rem. The element will have moderately rounded corners at the bottom right.

Class Properties

rad-br-0

border-bottom-right-radius: 0rem;

rad-br-1

border-bottom-right-radius: 0.25rem;

rad-br-2

border-bottom-right-radius: 0.5rem;

rad-br-3

border-bottom-right-radius: 0.75rem;

rad-br-4

border-bottom-right-radius: 1rem;

rad-br-5

border-bottom-right-radius: 1.25rem;

rad-br-6

border-bottom-right-radius: 1.5rem;

rad-br-7

border-bottom-right-radius: 1.75rem;

rad-br-8

border-bottom-right-radius: 2rem;

rad-br-full

border-bottom-right-radius: 100%;

rad-br-half

border-bottom-right-radius: 50%;
<div class="bg-indigo dim-16 rad-br-2"></div>

Top Left Radius

This example sets the top left border radius to 0.5rem. The element will have moderately rounded corners at the top left.

Class Properties

rad-tl-0

border-top-left-radius: 0rem;

rad-tl-1

border-top-left-radius: 0.25rem;

rad-tl-2

border-top-left-radius: 0.5rem;

rad-tl-3

border-top-left-radius: 0.75rem;

rad-tl-4

border-top-left-radius: 1rem;

rad-tl-5

border-top-left-radius: 1.25rem;

rad-tl-6

border-top-left-radius: 1.5rem;

rad-tl-7

border-top-left-radius: 1.75rem;

rad-tl-8

border-top-left-radius: 2rem;

rad-tl-full

border-top-left-radius: 100%;

rad-tl-half

border-top-left-radius: 50%;
<div class="bg-indigo dim-16 rad-tl-2"></div>

Top Right Radius

This example sets the top right border radius to 0.5rem. The element will have moderately rounded corners at the top right.

Class Properties

rad-tr-0

border-top-right-radius: 0rem;

rad-tr-1

border-top-right-radius: 0.25rem;

rad-tr-2

border-top-right-radius: 0.5rem;

rad-tr-3

border-top-right-radius: 0.75rem;

rad-tr-4

border-top-right-radius: 1rem;

rad-tr-5

border-top-right-radius: 1.25rem;

rad-tr-6

border-top-right-radius: 1.5rem;

rad-tr-7

border-top-right-radius: 1.75rem;

rad-tr-8

border-top-right-radius: 2rem;

rad-tr-full

border-top-right-radius: 100%;

rad-tr-half

border-top-right-radius: 50%;
<div class="bg-indigo dim-16 rad-tr-2"></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:rad-*,md:rad-*, lg:rad-*, and xxl:rad-* allows targeting specific utilities in different viewports.

<div class="rad-1 md:rad-2 ..."></div>
Hover modifiers

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

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