Border Radius Previewer

How to use

1. Adjust corners — Use sliders to set each corner's radius
2. Preview — See the border radius on a live preview
3. Copy CSS — Copy the generated CSS property

What Is a Border Radius Previewer?

A border radius previewer lets you visually adjust the CSS border-radius property for each corner of an element. You see the result in real time and copy the exact CSS values needed for your project.

Understanding Border Radius

The border-radius property in CSS rounds the corners of an element's outer border edge. It can take one value (all corners equal), two values (top-left/bottom-right and top-right/bottom-left), or four values (each corner individually, clockwise from top-left).

Common Patterns

• Cards: 8-16px for modern card designs
• Buttons: 4-8px for subtle rounding, 9999px for pill-shaped buttons
• Avatars: 50% for perfect circles
• Input fields: 4-6px for slight rounding
• Organic shapes: Asymmetric values create unique, blob-like shapes

Design System Consistency

Most design systems define a small set of border-radius tokens (none, sm, md, lg, full) to ensure consistency. This tool helps you experiment with exact values before adding them to your system.

Privacy

Everything runs in your browser. No data is transmitted.

Generate box shadows with the Box Shadow Generator. Build gradients with the CSS Gradient Generator.

Frequently asked questions

What is border-radius?

CSS border-radius rounds the corners of an element. You can set all corners equally or each corner independently.

How do I make a circle?

Set border-radius to 50% on a square element (equal width and height). Or use the Pill preset for rounded pills.

What's the shorthand order?

The four-value shorthand is: top-left, top-right, bottom-right, bottom-left (clockwise from top-left).

Can I use percentages?

Yes, border-radius accepts both px and %. This tool uses px for precision, but you can change units in your CSS.

Related free tools

• Color Converter — Convert between HEX, RGB, and HSL color formats.
• CSS Gradient Generator — Create linear and radial CSS gradients with live preview.
• Box Shadow Generator — Design CSS box shadows with a visual editor.
• Text Shadow Generator — Design CSS text shadows with a visual editor and live preview.
• Placeholder Image Generator — Generate placeholder images with custom size, color, and text.
• Color Palette Generator — Generate harmonious color palettes from any base color.
• Color Contrast Checker — Check WCAG 2.1 contrast ratio with AA / AAA pass marks for normal text, large text, and UI components.
• CSS Clamp Generator — Build fluid clamp() expressions for responsive typography and spacing — no media queries needed.
• Pixel to REM Converter — Live two-way px ↔ rem conversion with custom root font-size. Built for accessible, user-respecting design.
• Color Blindness Simulator — Preview images and UI through protanopia, deuteranopia, tritanopia, and achromatopsia simulations.
• CSS Unit Converter — Convert any CSS length unit to all others with customizable base font-size and viewport dimensions.
• CSS Triangle Generator — Generate pure-CSS triangles for tooltips, arrows, and speech bubbles. 8 directions, any size or color.