CSS Border Radius Generator
Control each corner of border-radius independently with sliders. Choose presets like pill, circle, or squircle and copy the CSS instantly.
How to use border-radius in CSS
The CSS border-radius property rounds the corners of an element. You can specify one value (all corners equal), two values (top-left/bottom-right and top-right/bottom-left), three values, or four individual corner values. Using percentage values (like 50%) creates circular or pill shapes regardless of the element's size.
Creating specific shapes
A circle needs equal width and height with border-radius: 50%. A pill shape uses a large enough radius on a wide element — border-radius: 999px is a common approach. A squircle uses around 30% radius on all corners.
What is the difference between px and % for border-radius?
Pixel values are absolute — a 12px radius looks the same regardless of element size. Percentage values are relative to the element's width for horizontal radii and height for vertical radii, making them responsive to size changes.
Can border-radius be animated?
Yes — border-radius is animatable with CSS transitions and animations. Use transition: border-radius 0.3s ease to smoothly morph between shapes on hover or state change.