Border radius

Mytril its a straightforward way for you why using the CSS to apply border-radius to elements using predefined rounded classes. These classes range from .rounded-0 for no rounding to .rounded-xl for a larger border radius. Developers can easily implement these options to customize the appearance of UI elements.

Predefined rounded classes

The following classes allow you to set different border-radius values for various elements:

Class	Properties
rounded-0	border-radius: 0;
rounded-sm	border-radius: 0.125rem;
rounded	border-radius: 0.25rem;
rounded-lg	border-radius: 0.5rem;
rounded-xl	border-radius: 1.5rem;
rounded-pill	border-radius: 9999px;
rounded-circle	border-radius: 50%;

Usage

Rounded corners

Use the rounded, rounded-0, rounded-sm, rounded-lg, and rounded-xl classes to set the border-radius of an element.

.rounded-0

.rounded-sm

.rounded

.rounded-lg

.rounded-xl

.rounded-pill

.rounded-circle

Rounding by side

Use the rounded-t-, rounded-b-, rounded-l-, and rounded-r- classes to set the border-radius of an element on a specific side.

.rounded-t-0

.rounded-t-sm

.rounded-t

.rounded-t-lg

.rounded-t-xl

.rounded-t-pill

.rounded-t-circle

.rounded-b-0

.rounded-b-sm

.rounded-b

.rounded-b-lg

.rounded-b-xl

.rounded-b-pill

.rounded-b-circle

.rounded-l-0

.rounded-l-sm

.rounded-l

.rounded-l-lg

.rounded-l-xl

.rounded-l-pill

.rounded-l-circle

.rounded-r-0

.rounded-r-sm

.rounded-r

.rounded-r-lg

.rounded-r-xl

.rounded-r-pill

.rounded-r-circle

Use the rounded-tr-, rounded-tl-, rounded-br-, rounded-bl-.

.rounded-tr-0

.rounded-tr-sm

.rounded-tr

.rounded-tr-lg

.rounded-tr-xl

.rounded-tr-pill

.rounded-tr-circle

.rounded-tl-0

.rounded-tl-sm

.rounded-tl

.rounded-tl-lg

.rounded-tl-xl

.rounded-tl-pill

.rounded-tl-circle

.rounded-br-0

.rounded-br-sm

.rounded-br

.rounded-br-lg

.rounded-br-xl

.rounded-br-pill

.rounded-br-circle

.rounded-bl-0

.rounded-bl-sm

.rounded-bl

.rounded-bl-lg

.rounded-bl-xl

.rounded-bl-pill

.rounded-bl-circle

<button class="custom-class rounded-xl">Button</button>

And you have a possibility to use border radius directly on your css with :root var.

.custom-class {
	border-radius: var(--rounded-xl);
}

root css --rounded-{n};