Skip to main content
AtomicKit’s border radius utilities let you round element corners with a single class — from a subtle 4px softening all the way to a fully circular pill shape. When a uniform radius isn’t enough, side-specific and individual corner variants give you granular control over exactly which corners are affected.

​
Radius Scale

The base rounded-* classes apply an identical radius to all four corners of the element.

​
Side Variants

Side variants round two adjacent corners on the same side of the element. They’re ideal for drawers, tooltips, tabs, and any component that’s flush against one edge of the viewport or a parent container. Typical suffixes for side variants: sm, base, lg, xl (e.g., rounded-t-sm, rounded-t-base, rounded-t-lg, rounded-t-xl).

​
Corner Variants

Corner variants target a single corner with surgical precision — useful for asymmetric design treatments, speech bubbles, or any component that rounds one corner differently from the rest. Typical suffixes for corner variants: sm, base, lg, xl (e.g., rounded-tl-sm, rounded-tl-base, rounded-tl-lg, rounded-tl-xl).

​
Code Examples

Standard button — moderate rounding:
Card surface — subtle softening:
Pill badge or tag:
Drawer or bottom sheet — top corners only:
Asymmetric callout — single corner:

​
Best Practices

  • Stick to one or two radius sizes per page. Mixing too many values (e.g., rounded-sm on some elements and rounded-xl on others without intention) creates visual inconsistency.
  • Use rounded-full for pills, avatar images, icon buttons, and tag labels — any element whose width and height are equal will become a perfect circle.
  • Use rounded-none to explicitly reset corner rounding on elements that inherit a radius from a parent or from Elementor’s default widget styles.
  • Match corner radius to element size — smaller components (chips, badges) look better with rounded-sm or rounded, while larger cards and modals benefit from rounded-lg or rounded-xl.
  • Use side variants (rounded-t-*) for components that are attached to an edge — for example, a tab that sits flush against a panel, or a bottom sheet anchored to the viewport floor.

​
Related Utilities

  • Border Width — Add border thickness to go alongside rounded corners.
  • Border Style — Choose solid or dashed line rendering for your border.