What is CSS border-radius?

The CSS border-radius property rounds the corners of an element's border box. You can apply a single value to round all corners equally, or specify different values for each corner using the longhand 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?

Using px gives absolute corner sizes regardless of the element's dimensions. Using % calculates the radius relative to the element's width and height — so 50% on a square element creates a perfect circle. For non-square elements, % creates an elliptical shape.

How do I make a circle with CSS?

Set border-radius to 50% on a square element (equal width and height). For example: width: 100px; height: 100px; border-radius: 50%. This works because 50% of both the width and height creates equal elliptical radii that form a circle.

Can I animate border-radius in CSS?

Yes! border-radius is animatable with CSS transitions and animations. For example: transition: border-radius 0.3s ease; Then changing border-radius values will animate smoothly. This is commonly used for hover effects like turning square buttons into pill shapes.

What does the shorthand border-radius syntax mean?

The 4-value shorthand follows: top-left top-right bottom-right bottom-left (clockwise from top-left). For example, border-radius: 10px 20px 30px 40px means: 10px top-left, 20px top-right, 30px bottom-right, 40px bottom-left.

CSS 圆角生成器

通过实时预览可视化生成 CSS border-radius 值。可以单独或统一控制每个角，选择 px 或 % 单位，一键复制 CSS。

单位:

所有角

预览

CSS 输出

border-radius: 12px;

使用方法

通过实时预览可视化生成 CSS border-radius 值。可以单独或统一控制每个角，选择 px 或 % 单位，一键复制 CSS。

1Choose a mode: start with Uniform to set all corners at once, or switch to Individual mode to control each corner separately for asymmetric designs.
2Select your unit — px for absolute sizes or % for relative sizes. Use % and set all corners to 50% to create a perfect circle on square elements.
3Adjust the sliders or type values directly. The live preview box updates instantly so you can see exactly how your shape will look.
4Click Copy to get the CSS rule. The generator automatically uses the shorthand format: border-radius: TL TR BR BL.

主要功能

Live visual preview — see your border-radius changes instantly in a real element preview
px and % units — supports both absolute and relative values for circles, pill shapes, and organic forms
Uniform and individual corner modes — symmetric shapes or full independent control
Smart CSS shorthand output — single value when all corners match, 4-value shorthand when they differ

常见问题

了解更多

CSS Border Radius Generator — Complete Guide