rounded-none…rounded-full, per-corner (rounded-tl-*) and per-side (rounded-t-*) radii. This family contains 150 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
rounded-none | border-radius: 0px; |
rounded-sm | border-radius: 0.125rem; |
rounded | border-radius: 0.25rem; |
rounded-md | border-radius: 0.375rem; |
rounded-lg | border-radius: 0.5rem; |
rounded-xl | border-radius: 0.75rem; |
rounded-2xl | border-radius: 1rem; |
rounded-3xl | border-radius: 1.5rem; |
rounded-full | border-radius: 9999px; |
rounded-xs | border-radius: 0.125rem; |
rounded-s-none | border-start-start-radius: 0px; border-end-start-radius: 0px; |
rounded-s-sm | border-start-start-radius: 0.125rem; border-end-start-radius: 0.125rem; |
rounded-s | border-start-start-radius: 0.25rem; border-end-start-radius: 0.25rem; |
rounded-s-md | border-start-start-radius: 0.375rem; border-end-start-radius: 0.375rem; |
rounded-s-lg | border-start-start-radius: 0.5rem; border-end-start-radius: 0.5rem; |
rounded-s-xl | border-start-start-radius: 0.75rem; border-end-start-radius: 0.75rem; |
rounded-s-2xl | border-start-start-radius: 1rem; border-end-start-radius: 1rem; |
rounded-s-3xl | border-start-start-radius: 1.5rem; border-end-start-radius: 1.5rem; |
rounded-s-full | border-start-start-radius: 9999px; border-end-start-radius: 9999px; |
rounded-s-xs | border-start-start-radius: 0.125rem; border-end-start-radius: 0.125rem; |
rounded-e-none | border-start-end-radius: 0px; border-end-end-radius: 0px; |
rounded-e-sm | border-start-end-radius: 0.125rem; border-end-end-radius: 0.125rem; |
rounded-e | border-start-end-radius: 0.25rem; border-end-end-radius: 0.25rem; |
rounded-e-md | border-start-end-radius: 0.375rem; border-end-end-radius: 0.375rem; |
rounded-e-lg | border-start-end-radius: 0.5rem; border-end-end-radius: 0.5rem; |
rounded-e-xl | border-start-end-radius: 0.75rem; border-end-end-radius: 0.75rem; |
rounded-e-2xl | border-start-end-radius: 1rem; border-end-end-radius: 1rem; |
rounded-e-3xl | border-start-end-radius: 1.5rem; border-end-end-radius: 1.5rem; |
rounded-e-full | border-start-end-radius: 9999px; border-end-end-radius: 9999px; |
rounded-e-xs | border-start-end-radius: 0.125rem; border-end-end-radius: 0.125rem; |
rounded-t-none | border-top-left-radius: 0px; border-top-right-radius: 0px; |
rounded-t-sm | border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; |
rounded-t | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; |
rounded-t-md | border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; |
rounded-t-lg | border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; |
rounded-t-xl | border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; |
rounded-t-2xl | border-top-left-radius: 1rem; border-top-right-radius: 1rem; |
rounded-t-3xl | border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; |
rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px; |
rounded-t-xs | border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; |
rounded-r-none | border-top-right-radius: 0px; border-bottom-right-radius: 0px; |
rounded-r-sm | border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem; |
rounded-r | border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; |
rounded-r-md | border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; |
rounded-r-lg | border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; |
rounded-r-xl | border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; |
rounded-r-2xl | border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; |
rounded-r-3xl | border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; |
rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; |
rounded-r-xs | border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem; |
rounded-b-none | border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; |
rounded-b-sm | border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem; |
rounded-b | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; |
rounded-b-md | border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; |
rounded-b-lg | border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; |
rounded-b-xl | border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem; |
rounded-b-2xl | border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem; |
rounded-b-3xl | border-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem; |
rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px; |
rounded-b-xs | border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem; |
…and 90 more in this family — search by class name to find the exact one.
Example#
example
<button class="rounded-lg px-4 py-2">Standard</button>
<img class="rounded-full" src="a.jpg" alt="" />Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Standard scale: sm(2px) md(6px) lg(8px) xl(12px) 2xl(16px) 3xl(24px)
- rounded-full = circles on square boxes, pills on rectangles
Related#
utilities/borders/ring|Ring · comparisons/ring-vs-border-vs-outline|Ring vs border vs outline