MyCalcBuddy

Border Radius Generator

Create CSS border-radius values with individual corner control for rounded corners in web design.

Corner Settings

16px
16px
16px
16px

Preview

CSS Code

Shorthand
border-radius: 16px;
Individual Properties
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;

What Is CSS Border Radius?

The CSS border-radius property lets you round the corners of any HTML element — buttons, cards, images, divs, and more. Instead of sharp 90-degree corners, you get smooth curves that feel modern and polished. The border radius generator on this page produces ready-to-copy CSS code the moment you move a slider, so you never have to guess values or refresh the browser manually.

Under the hood, the browser treats each corner as the arc of an ellipse or circle. When you supply a single length (for example, 16px), the same radius is applied to all four corners and the shorthand collapses to just that one value. When the four corners differ, the browser needs all four values written in clockwise order: top-left, top-right, bottom-right, bottom-left.

This tool supports four CSS units so you can match whatever convention your project uses:

  • px — absolute pixels; predictable at a fixed viewport size.
  • % — percentage of the element's width or height; great for perfect circles (50%) and fluid layouts.
  • rem — relative to the root font size; scales with accessibility settings.
  • em — relative to the element's own font size; keeps corners proportional when text size changes.

Whether you are crafting a subtle card shadow, building a pill-shaped badge, or exploring creative leaf and teardrop shapes, understanding border radius is one of the fastest ways to elevate the visual quality of any web interface.

CSS Shorthand Output Formula

allSame ? "${value}${unit}" : "${tl} ${tr} ${br} ${bl}"

Where:

  • tl= Top-left corner value with unit (e.g., 16px)
  • tr= Top-right corner value with unit
  • br= Bottom-right corner value with unit
  • bl= Bottom-left corner value with unit
  • allSame= True when tl === tr === br === bl; outputs a single collapsed value instead of four

How to Use the Border Radius Generator

The border radius generator is designed to give instant visual feedback so you can design by eye rather than by trial and error in a code editor. Here is a step-by-step walkthrough of every control on the page.

  1. Link all corners — When this checkbox is checked, every slider moves in sync. Drag any one slider and all four corners update together. Uncheck it to unlock individual corner control for asymmetric shapes.
  2. Choose a unit — Select px, %, rem, or em from the dropdown. The slider maximum adjusts automatically: percentage mode caps at 50% (the point at which adjacent sides meet), while the other units cap at 100 for comfortable adjustment.
  3. Adjust corner sliders — Move the top-left, top-right, bottom-right, and bottom-left sliders independently. The live preview box updates instantly so you can see the shape before copying the code.
  4. Apply a preset — Click any preset button (None, Small, Medium, Large, XLarge, Full, Leaf, Drop) to jump to a well-known starting point, then fine-tune from there.
  5. Customise the preview — Change the preview box color and size to match your design context, giving you a realistic view of how the shape will look on your actual element.
  6. Copy the CSS — Click Copy next to either the shorthand or the individual-property block, then paste directly into your stylesheet, CSS-in-JS component, or design token file.

The generated shorthand condenses four equal values into one (e.g., border-radius: 16px;) and expands to four values only when the corners differ (e.g., border-radius: 0px 50px 0px 50px;). Both forms are 100% valid CSS and supported in all modern browsers.

CSS Border Radius Units Explained

Choosing the right unit for your border radius can make the difference between a design that feels consistent at every screen size and one that looks off on mobile or when a user increases their font size. Here is a practical comparison of the four units this calculator supports.

Unit Relative To Best For Example
px Screen pixels Fixed-size components, design systems border-radius: 8px;
% Element dimensions Circles, pills, fluid layouts border-radius: 50%;
rem Root font size (typically 16 px) Accessible UIs that respect user font preferences border-radius: 1rem;
em Parent / element font size Type-proportional badges, inline elements border-radius: 0.5em;

A percentage value applies to both the horizontal and vertical radii of each corner's ellipse. Because of the way the CSS specification works, values above 50% are clamped — adjacent corners cannot overlap — so a circle is perfectly achieved at exactly 50% on a square element. For non-square elements at 50%, you get an ellipse, which is still a common and attractive shape for avatars and profile pictures.

Design systems such as Material Design, Tailwind CSS, and Bootstrap all publish their corner-radius scales in rem or px. Using rem keeps your corners harmonious with your typography scale and means that when a user increases their browser font size for accessibility, the UI proportions stay consistent rather than having sharp-cornered elements sitting next to unusually large text.

Corner Shape Presets Guide

The preset buttons give you a head start on the most common and creative border-radius shapes used in modern web design. Each preset is a set of four corner values in the order top-left, top-right, bottom-right, bottom-left.

Preset Values (px) Resulting CSS Common Use
None 0 / 0 / 0 / 0 border-radius: 0px; Sharp rectangles, tables
Small 4 / 4 / 4 / 4 border-radius: 4px; Subtle input fields, tooltips
Medium 8 / 8 / 8 / 8 border-radius: 8px; Cards, modals, buttons
Large 16 / 16 / 16 / 16 border-radius: 16px; Hero cards, feature panels
XLarge 24 / 24 / 24 / 24 border-radius: 24px; App-style containers, iOS-feel UI
Full 9999 / 9999 / 9999 / 9999 border-radius: 9999px; Pill buttons, tags, chips
Leaf 0 / 50 / 0 / 50 border-radius: 0px 50px 0px 50px; Decorative icons, nature themes
Drop 50 / 50 / 0 / 50 border-radius: 50px 50px 0px 50px; Chat bubbles, map pins, pointers

The Full preset uses 9999px rather than 50% because a very large pixel value reliably produces a pill shape on any element regardless of its dimensions, without triggering the ellipse behavior that 50% creates on non-square elements. This technique is widely used in Tailwind CSS's rounded-full utility class.

Design Best Practices for Rounded Corners

Rounded corners are more than a stylistic choice — they communicate personality, guide attention, and affect how approachable a design feels. Here are the principles that professional UI designers follow when applying border radius across a project.

Maintain a consistent radius scale

Rather than using arbitrary values on every component, define a small set of radius tokens (for example, 4 px, 8 px, 16 px, 9999 px) and apply them consistently. This is exactly how Tailwind CSS, Material Design, and Apple's Human Interface Guidelines work. Consistency makes a UI feel intentional rather than accidental.

Match the radius to the element size

A tiny 4 px radius on a large hero card can look almost square. A very large radius on a small element can turn it into an unintended circle. A practical rule of thumb: the border radius should be roughly 10–20% of the smaller dimension of the element. For a 200 px card, 16–32 px looks balanced; for a 40 px button, 6–8 px is appropriate.

Use percentage for circles and avatars

When you want a perfect circle regardless of screen resolution, use border-radius: 50% on a square element. This scales automatically with the element and never produces an imperfect oval. Our CSS generator supports percentage values up to 50% (the browser clamps values beyond that).

Align with your design system's personality

Sharp corners (0 px) project professionalism, authority, and precision — common in financial dashboards and legal documents. Soft corners (8–16 px) feel friendly and modern — typical of SaaS apps and consumer products. Very round corners (full/pill) feel playful and energetic — common in notifications, tags, and mobile apps.

Test across background colors and themes

Use the preview box color picker in this generator to test your shape against both light and dark backgrounds before committing. Rounded corners can look different against busy backgrounds or when combined with box shadows and borders.

Worked Examples

Uniform Rounded Card (16 px)

Problem:

You want a card component with the same rounded corner on all four sides using 16 px.

Solution Steps:

  1. 1Set all four corner inputs to 16 and keep the unit as px.
  2. 2Because all four values are equal (topLeft === topRight === bottomRight === bottomLeft → true), the generator collapses the output to a single value.
  3. 3The shorthand CSS becomes: border-radius: 16px;
  4. 4The individual properties are: border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px;

Result:

border-radius: 16px;

Pill / Full Rounded Button

Problem:

You want a pill-shaped button that stays fully rounded no matter how wide the text gets.

Solution Steps:

  1. 1Apply the Full preset, which sets all four corners to 9999 in px.
  2. 2All corners are equal (9999 === 9999 === 9999 === 9999 → true), so the shorthand collapses.
  3. 3The generator outputs: border-radius: 9999px;
  4. 4On any button with height under 9999 px, the browser automatically clamps the radius so the ends are perfectly semicircular — a classic pill shape.

Result:

border-radius: 9999px;

Leaf Shape (Asymmetric Corners)

Problem:

You want a decorative leaf shape with rounded top-right and bottom-left corners and sharp top-left and bottom-right.

Solution Steps:

  1. 1Uncheck "Link all corners" to enable independent control.
  2. 2Set top-left to 0, top-right to 50, bottom-right to 0, bottom-left to 50 (all in px).
  3. 3The four values differ (0 ≠ 50), so the shorthand uses all four values in clockwise order: top-left top-right bottom-right bottom-left.
  4. 4The generator outputs: border-radius: 0px 50px 0px 50px;

Result:

border-radius: 0px 50px 0px 50px;

Drop / Chat Bubble Shape

Problem:

You want a teardrop or chat-bubble pointer shape with a flat bottom-right corner.

Solution Steps:

  1. 1Uncheck "Link all corners" for independent control.
  2. 2Set top-left to 50, top-right to 50, bottom-right to 0, bottom-left to 50 (px).
  3. 3Values differ across corners, so all four appear in the shorthand in clockwise order.
  4. 4Result: border-radius: 50px 50px 0px 50px; — produces a rounded shape with a sharp bottom-right pointing corner, perfect for speech bubbles.

Result:

border-radius: 50px 50px 0px 50px;

Tips & Best Practices

  • ✓Use 9999px instead of 50% for pill-shaped buttons — it stays a pill on any width without turning into an ellipse.
  • ✓Keep a consistent radius scale across your project (e.g., 4 px, 8 px, 16 px, 24 px, 9999 px) to create a cohesive visual language.
  • ✓Use rem units in design systems so rounded corners scale proportionally when users change their browser font size.
  • ✓Uncheck "Link all corners" in the generator to create creative asymmetric shapes like leaves, teardrops, and speech bubbles.
  • ✓Copy the individual-property CSS block when you need to override just one corner inside a media query or pseudo-class without resetting the others.
  • ✓Always test your border radius against both light and dark backgrounds using the preview color picker — curves can look very different on contrasting surfaces.
  • ✓For avatar and profile pictures, use border-radius: 50% on a square element to reliably produce a circle at any size.
  • ✓When combining border-radius with box-shadow, the shadow automatically follows the rounded edge — no extra code needed.

Related Calculators

CSS Grid Generator

Visually build CSS grid layouts and copy ready-to-use grid-template code.

Color Converter

Convert colors between HEX, RGB, HSL, and HSB formats for your CSS stylesheets.

Color Palette Generator

Generate harmonious color palettes to pair with your rounded-corner UI components.

CSS Minifier

Minify CSS to reduce file size before deploying your border-radius styles to production.

Aspect Ratio Calculator

Calculate element dimensions to ensure square elements produce perfect circles with 50% radius.

Animation Timing Generator

Create smooth CSS animation curves to animate border-radius transitions between shapes.

Frequently Asked Questions

The shorthand <code>border-radius</code> sets all four corners in one declaration and uses a clockwise order: top-left, top-right, bottom-right, bottom-left. When all four values are equal, the shorthand collapses to a single value (e.g., <code>border-radius: 16px;</code>). The individual properties — <code>border-top-left-radius</code>, <code>border-top-right-radius</code>, <code>border-bottom-right-radius</code>, <code>border-bottom-left-radius</code> — set each corner explicitly and are useful when you want to override a single corner without changing the others, such as inside a hover state or a media query.
The CSS specification states that when the sum of adjacent corner radii exceeds the side length, all radii are scaled down proportionally so they fit. Because of this, 50% is the exact threshold at which adjacent corners just touch, creating a perfect circle on a square element. Values above 50% are clamped to the same result. For non-square elements, 50% produces an ellipse rather than a circle, which is why many developers prefer using large pixel values like 9999px to guarantee a pill shape that adapts to element width without ellipse distortion.
For most UI components in a design system, <strong>rem</strong> is the best choice because it scales with the user's root font size, ensuring accessibility and proportional scaling. Use <strong>px</strong> when you need an absolutely fixed corner size regardless of font settings — common in precisely measured design systems. Use <strong>%</strong> for circles and avatar images. Use <strong>em</strong> when the corner radius should scale with the text inside the element, such as inline badges or chips. This border radius generator supports all four units so you can experiment and choose the most appropriate one for your project.
Apply <code>border-radius: 50%</code> to any element that has equal width and height. For example, a 100px × 100px div with <code>border-radius: 50%</code> becomes a perfect circle. If the element is not square, 50% produces an ellipse. To create a circle for an avatar or icon, always ensure the element's width and height are equal, then set border-radius to 50% or a very large pixel value like 9999px. Our border radius generator lets you switch to percentage mode and set a value of 50 across all corners to preview this instantly.
Yes — <code>border-radius</code> works seamlessly with <code>border</code>, <code>box-shadow</code>, <code>outline</code>, and <code>background</code> properties. The border follows the curve of the corner, and box shadows also respect the rounded shape. One subtlety: the <code>outline</code> property did not follow border-radius in older browsers, though modern browsers (Chrome 94+, Firefox, Safari) now support rounded outlines. If you use a thick border alongside a small border radius, the inner content area will have a slightly smaller effective radius than the outer edge — this is the CSS box model at work.
The <code>border-radius</code> property has universal support across all modern browsers — Chrome, Firefox, Safari, Edge, Opera, and their mobile counterparts. It has been supported without vendor prefixes since approximately 2012 (Internet Explorer 9+, Firefox 4+, Chrome 5+, Safari 5+). You do not need <code>-webkit-border-radius</code> or <code>-moz-border-radius</code> prefixes in any project targeting modern browsers. If you must support very old browsers (IE 8 or earlier), those environments simply display square corners as a graceful fallback, which is acceptable in most cases.

Sources & References

Last updated: 2026-06-05

💡

Help us improve!

How would you rate the Border Radius Generator?

<>

Editorial Note

MyCalcBuddy Editorial Team

This page is maintained as an educational calculator reference.

Source

Formula Source: Standard Mathematical References

by Various

UpdatedLast reviewed: May 2026
CheckedFormula checks are based on standard references and internal QA review.