Question 1

What is CSS border-radius?

Accepted Answer

CSS border-radius rounds the corners of an element. You can set values for all corners at once or individually. Values can be in pixels (px), percentages (%), or other CSS length units.

Question 2

How do I create a circle with border-radius?

Accepted Answer

Set border-radius: 50% on an element with equal width and height. For example: width: 100px; height: 100px; border-radius: 50% creates a perfect circle.

Question 3

What is the shorthand for individual corner values?

Accepted Answer

border-radius: TL TR BR BL sets corners clockwise from top-left. For example: border-radius: 10px 20px 30px 40px sets different values for each corner.

Question 4

Can I create elliptical corners?

Accepted Answer

Yes, using the / separator: border-radius: 50% / 25% creates elliptical corners where the horizontal radius is 50% and vertical radius is 25%.

Question 5

What values can border-radius accept?

Accepted Answer

border-radius accepts px, em, rem, %, and other CSS length units. Percentage values are relative to the element's width for horizontal and height for vertical radii.

ボーダーラジウスビジュアライザー

よくある質問

Comments & Feedback