How To Use Border Radius İn Css
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
The simplest form
One value applies to all four corners:
Shorthand: one, two, three, or four values
This is 80% of what most sites need: a single radius that softens every corner of every card, button, and input. Pick one value for your design system (commonly 4, 6, 8, 12, or 16 px), apply it globally, and stop agonizing.
Individual corner properties
The four-value form is clockwise starting from the top-left, same order as padding and margin (top, right, bottom, left adapted to corners).
Percent versus pixels
When you want to round only specific corners, the per-corner properties are clearer than a four-value shorthand:
Pill and capsule buttons
Common patterns:
Perfect circles
Use pixels for consistent curves across a design system. Use percentages for shapes that should morph with size:
Elliptical radii
The classic pill button: make the radius greater than or equal to half the height:
Radius versus overflow clipping
A perfect circle needs a square container plus 50% radius:
Radius and borders
A corner can have different horizontal and vertical radii, producing an ellipse in that corner. Syntax uses a slash:
Radius and outlines
This makes every corner an ellipse wider than it is tall. Combined with the four-value shorthand, you can produce creative shapes:
The squircle problem
That produces an organic, blob-like shape useful for decorative backgrounds.
Design system presets
Borders with large radii on rectangular elements can produce a visible “stretched ring” effect at the long ends — the border appears thicker there because the curve is tighter. For pills this is usually fine; for oblong cards, consider smaller radii.
Common mistakes
Rather than choosing radii per component, define a scale and use it:
Run the numbers
Then components reference the variables. Changing the system is one edit instead of a hundred.