โ FAQ โ Border Radius Generator
How do I create a circle with CSS border-radius?
Set border-radius to 50% on an element that has equal width and height (a square). The 50% value rounds all corners to half the element's size, creating a perfect circle. Example: width: 100px; height: 100px; border-radius: 50%. You can also use 9999px on a rectangle to get a pill/capsule shape.
Can I set different radius for each corner?
Yes. The shorthand order is: border-radius: top-left top-right bottom-right bottom-left (clockwise from top-left). So border-radius: 20px 0 20px 0 creates rounded top-left and bottom-right corners only. You can also use the individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
What is the difference between px and % for border-radius?
Pixel values (px) give a fixed, absolute radius regardless of element size. Percentage values are relative to the element's dimensions โ 50% always creates a circle/ellipse shape. For responsive designs where elements change size, percentage values maintain proportional rounding. For consistent rounding across different sized elements, use px values.