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.
ClassValueCSS Property
.rounded-none0border-radius: 0
.rounded-sm4pxborder-radius: 4px
.rounded6pxborder-radius: 6px
.rounded-lg8pxborder-radius: 8px
.rounded-xl12pxborder-radius: 12px
.rounded-2xl16pxborder-radius: 16px
.rounded-full9999pxborder-radius: 9999px

​
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.
PrefixCorners AffectedExample Class
rounded-t-*Top-left + Top-rightrounded-t-lg
rounded-r-*Top-right + Bottom-rightrounded-r-xl
rounded-b-*Bottom-left + Bottom-rightrounded-b-lg
rounded-l-*Top-left + Bottom-leftrounded-l-xl
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.
ClassCorner AffectedExample
rounded-tl-*Top-leftrounded-tl-lg
rounded-tr-*Top-rightrounded-tr-xl
rounded-br-*Bottom-rightrounded-br-lg
rounded-bl-*Bottom-leftrounded-bl-sm
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: 
<div class="border-2 border-solid border-primary rounded-lg">
  <!-- Button with 8px corner radius -->
</div>
Card surface — subtle softening: 
<div class="border-1 border-solid border-gray rounded">
  <!-- Card with 6px corners, unobtrusive rounding -->
</div>
Pill badge or tag: 
<div class="rounded-full">
  <!-- Tag or label with fully circular end caps -->
</div>
Drawer or bottom sheet — top corners only: 
<div class="rounded-t-lg">
  <!-- Slides up from bottom; top-left and top-right are rounded, bottom edges are square -->
</div>
Asymmetric callout — single corner: 
<div class="border-2 border-solid border-primary rounded-tl-lg">
  <!-- Only the top-left corner is rounded for a speech bubble or notch effect -->
</div>

​
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.