Tailwind Border Radius Classes to CSS
Convert Tailwind rounded, rounded-lg, rounded-full, rounded-t-lg and other border-radius classes to CSS. See the pixel values behind each radius utility.
Detailed Explanation
Tailwind Border Radius in CSS
Tailwind's rounded-* classes provide a concise way to set border radius values. Each class maps to a specific CSS border-radius value, and directional variants allow you to round individual corners or sides.
Border Radius Scale
/* rounded-none */ border-radius: 0px;
/* rounded-sm */ border-radius: 0.125rem; /* 2px */
/* rounded */ border-radius: 0.25rem; /* 4px */
/* rounded-md */ border-radius: 0.375rem; /* 6px */
/* rounded-lg */ border-radius: 0.5rem; /* 8px */
/* rounded-xl */ border-radius: 0.75rem; /* 12px */
/* rounded-2xl */ border-radius: 1rem; /* 16px */
/* rounded-3xl */ border-radius: 1.5rem; /* 24px */
/* rounded-full */ border-radius: 9999px;
Directional Variants
Directional classes set two corner radii at once:
/* rounded-t-lg (top-left + top-right) */
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
/* rounded-b-lg (bottom-left + bottom-right) */
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
/* rounded-l-lg (top-left + bottom-left) */
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
/* rounded-r-lg (top-right + bottom-right) */
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
Circular Elements
rounded-full sets border-radius: 9999px, which makes any square element a perfect circle. This is the standard approach for avatar images and circular icon buttons.
Common Patterns
- Cards:
rounded-lgorrounded-xl - Buttons:
rounded-mdorrounded-fullfor pill shapes - Modals:
rounded-xlorrounded-2xl - Avatars:
rounded-full
Use Case
UI developers who need to match the exact border-radius values from a Tailwind mockup in a non-Tailwind CSS file, or teams standardizing border-radius tokens in a design system based on Tailwind's scale.