Border

Border Radius

Utilities for controlling the border radius of an element.

Basic usage

Rounded corners

Use utilities like .rounded-sm, .rounded, or .rounded-lg to apply different border radius sizes to an element.

rounded

rounded-md

rounded-lg

rounded-full

<div className="**rounded** ..."></div>
<div className="**rounded-md** ..."></div>
<div className="**rounded-lg** ..."></div>
<div className="**rounded-full** ..."></div>

Pill buttons

Use the rounded-full utility to create pill buttons.

rounded-full

<button className="**rounded-full** ...">Save Changes</button>

No rounding

Use rounded-none to remove an existing border radius from an element.

This is most commonly used to remove a border radius that was applied at a smaller breakpoint.

rounded-none

<button className="**rounded-none** ...">Save Changes</button>

Rounding sides separately

Use rounded-{t|r|b|l}{-size?} to only round one side of an element.

rounded-t-lg

rounded-r-lg

rounded-b-lg

rounded-l-lg

<div className="**rounded-t-lg** ..."></div>
<div className="**rounded-r-lg** ..."></div>
<div className="**rounded-b-lg** ..."></div>
<div className="**rounded-l-lg** ..."></div>

Rounding corners separately

Use rounded-{tl|tr|br|bl}{-size?} to only round one corner an element.

rounded-tl-lg

rounded-tr-lg

rounded-br-lg

rounded-bl-lg

<div className="**rounded-tl-lg** ..."></div>
<div className="**rounded-tr-lg** ..."></div>
<div className="**rounded-br-lg** ..."></div>
<div className="**rounded-bl-lg** ..."></div>