All tools
Design tools

Border-Radius Visualizer

Design CSS border-radius interactively — control all four corners independently, preview in real time, and copy the CSS code instantly.

Per-corner control Elliptical radius Live preview Percentage & px Squircle shapes Copy CSS
Get started free Sign in

Free · No credit card · 50 credits/day

Common border-radius patterns

Sharp corners
border-radius: 0
Slightly rounded
border-radius: 8px
Card style
border-radius: 16px
Pill / capsule
border-radius: 9999px
Circle / ellipse
border-radius: 50%
Chat bubble
border-radius: 0 16px 16px 16px

Frequently asked questions

What is the shorthand for CSS border-radius?

The shorthand goes clockwise: border-radius: top-left top-right bottom-right bottom-left. With fewer values: 1 = all equal; 2 = top-left & bottom-right / top-right & bottom-left; 3 = top-left / top-right & bottom-left / bottom-right. A circle: border-radius: 50%.

How do I make an elliptical border-radius?

Use the slash syntax: border-radius: horizontal-radius / vertical-radius. Example: border-radius: 50px / 30px creates corners with different horizontal and vertical curvatures. Use it per-corner too: border-radius: 100px 0 0 0 / 50px 0 0 0 for just the top-left.

What does border-radius: 50% do?

On a square element, border-radius: 50% creates a perfect circle. On a rectangle, it creates an ellipse. To always get a circle regardless of element size, apply it to a square (equal width and height). Standard technique for avatar/profile images.

What is the squircle and can I create it in CSS?

A squircle is a superellipse — smooth curves with no sharp corners. Apple uses it for app icons. Approximate in CSS with border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% and vary the values. No native CSS squircle keyword exists yet.

Related design tools

More CSS visual tools.

CSS Box-Shadow Generator

Add depth with layered shadows alongside your rounded corners.

CSS Gradient Generator

Fill your rounded shapes with beautiful gradients.

CSS Animation Generator

Animate border-radius changes for morphing shape effects.

Round the right corners, every time

Free account. 50 credits per day. Access to 75+ tools instantly.

Create free account →