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;

使い方

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