Free · Fast · Privacy-first

CSS Rounded Corners Generator

Rounded corners are one of the most common CSS tasks, yet picking the right pixel value for each component type takes trial and error without a visual reference.

⚡

Preview common design values: 4px, 8px, 12px, 9999px

🔒

Test rounded corners on cards, buttons, and input shapes

✨

Live preview with adjustable border and background

⚡

One-click CSS copy for direct stylesheet use

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Border Builder to your website

Drop the Border Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Choosing the Right Rounded Corner Value for Each Component

The radius value you choose communicates the visual tone of your UI. Small values like 2px to 4px read as precise and functional, common in data-heavy tools, dashboards, and enterprise software where density is prioritized over friendliness. Values from 6px to 10px are the most neutral and widely used: they signal modernity without excessive softness, which is why most design systems like Material Design, Tailwind, and Chakra use 4px or 6px as their base radius with 8px as the medium step. These values work across button sizes, input fields, and cards without looking out of scale.

Larger values from 12px to 20px work best on roomy components like modal dialogs, feature cards, and section containers where there is enough surrounding whitespace for the curves to read clearly. On a compact 32px tall button, a 16px radius produces a pill shape rather than a subtle rounding because the radius hits the height cap. For cards with more vertical space, 12px to 16px creates a noticeably rounded corner that feels softer and more consumer-facing. Product pages, marketing sites, and SaaS landing pages often lean toward this range to create an approachable aesthetic.

Pill shapes use a very large value like 9999px rather than a percentage. Setting 50% on a rectangular button produces an ellipse: the horizontal radius reaches 50% of the width, which extends further than the height allows, making the result unpredictable on different text lengths. A large fixed value like 9999px is always capped at half the element height, producing perfect semicircular ends regardless of button width. Use pill shapes for primary call-to-action buttons, filter chips, and badge labels. Inputs styled as pills are common in search bars and messaging interfaces where a softer form signals a casual, conversational context.

Box-sizing interacts with rounded corners in ways that catch designers off-guard. With the default content-box model, a button declared as width: 200px with a 1px border occupies 202px including the border. If the design system specifies button hover increases the border to 3px to signal interactivity, the button suddenly takes 206px and pushes neighbors aside, producing a visible reflow each time the cursor enters or leaves. Switching to box-sizing: border-box keeps the outer dimension fixed regardless of border width, which is the right behaviour for almost every component using rounded corners. The same applies to inputs and cards: any rounded element that might change border thickness across states needs border-box to keep its outer shape stable. Modern resets apply box-sizing: border-box universally for this reason, and the FixTools previews assume it for the recommended values.

MDN: border-radius W3C CSS Backgrounds and Borders

How to use this tool

💡

Start with a preset radius value matching your component type: 4px for inputs and tight UI, 8px for buttons, 12px for cards in open layouts, or 9999px for pill buttons. Adjust the preview background and border to match your actual component before copying.

How It Works

Step-by-step guide to css rounded corners generator:

1
Select a preset or enter a custom value
Choose from the common radius presets (4px, 8px, 12px, 9999px) or type a custom pixel value. The preview updates immediately to show the corner appearance.
2
Set the component shape
Adjust the preview element's width and height to match your actual button, card, or input dimensions. This ensures the radius reads correctly at the real component size.
3
Add a border and background
Enable a visible border and set a background color on the preview to see how the rounded corners interact with both. A border makes the corners clearer than a background-only preview.
4
Copy and apply
Copy the border-radius declaration and paste it into your component CSS. Test at multiple viewport widths if the component is responsive.

Real-world examples

Common situations where this approach makes a real difference:

Standardizing radius values across a design system

A design system needs consistent border-radius values documented and applied across all components. Defining CSS custom properties at the root level, such as --radius-sm: 4px, --radius-md: 8px, --radius-lg: 12px, --radius-pill: 9999px, gives every component a shared vocabulary. The generator helps validate each step of the scale visually before committing to the final values in the design token file.

Pill-shaped primary action buttons

Marketing pages and consumer apps often use pill buttons for their main call-to-action. The large radius creates a friendly, approachable tone different from rectangular buttons. Using 9999px rather than 50% ensures the pill shape holds at any button width, including when the button label changes length. The generator confirms the visual result before you write the CSS.

Search input with fully rounded ends

Search inputs styled as pills are recognizable and signal a conversational interface. Applying border-radius: 9999px to the input with appropriate padding and a magnifying glass icon inside creates the standard search bar pattern. The generator lets you preview this alongside a flat 4px version to compare how each reads in the context of your navigation bar.

Feature cards on a landing page

Landing page feature cards with generous padding and icon illustrations benefit from 12px to 16px border-radius, which creates a soft container that complements the open layout. Pairing the radius with a 1px solid border and a subtle box-shadow gives each card a defined but lightweight appearance. The generator previews the card shape so you can confirm the radius before applying it across all card variants.

Pro tips

Get better results with these expert suggestions:

Use a radius scale that matches your spacing scale

Design systems built on a 4px base grid often use radius values that are multiples of 4: 4px, 8px, 12px, 16px. This keeps radius values consistent with margin and padding choices. Choosing arbitrary values like 6px or 10px can look correct in isolation but creates visual inconsistency when placed next to components that follow the 4px grid.

Avoid mixing percentage and pixel radii across components

Percentage border-radius scales with element size, while pixel values stay fixed. Using both in the same design system creates inconsistency: a button at 50% radius changes shape when resized while a neighboring button at 9999px does not. Pick one approach per component category and document it in your design system.

Border-radius on table cells requires special handling

Table cells with border-collapse: collapse ignore border-radius because collapsed borders are shared between cells. To use rounded corners on table rows or the table itself, use border-collapse: separate and set border-spacing. Alternatively, use div-based table-like layouts with CSS grid or flexbox, which respond to border-radius without these limitations.

Animate radius for toggle and expand interactions

A button that expands into a card on click can animate border-radius from 9999px to 12px as part of the transition. Combined with width and height transitions, this creates a morphing interaction. Keep transition durations between 200ms and 350ms for border-radius changes to feel snappy rather than sluggish.

Match radius scale to component hierarchy

Use smaller radii for inner components and larger radii for outer containers. A card at 12px radius should contain buttons at 8px and inputs at 4px. Applying the same large radius to everything flattens the visual hierarchy and makes interfaces look toy-like.

Define radius as a CSS custom property

Store your border-radius values in CSS variables: --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px. Reference these across components to maintain a consistent scale and make global updates a single variable change rather than a find-and-replace.

Test at different font sizes

A 4px radius looks different on a compact 28px button versus a large 48px button. If you use relative sizing via em units, the radius stays proportional. With fixed pixels, verify the corner appearance at each button size variant in your design system.

FAQ

Frequently asked questions

The right value depends on the visual tone you want. 4px produces a subtle modern rounding common in enterprise and productivity tools. 8px is the most neutral choice and works for most button sizes from 32px to 48px in height. Larger buttons at 48px or above can accommodate 12px comfortably. For pill buttons, use 9999px rather than 50%, because 50% on a wide button creates an ellipse rather than fully rounded ends. Most design systems define two to three button radius options corresponding to compact, default, and large button variants.

Fifty percent border-radius creates a circle only on square elements where width and height are equal. On a rectangle, 50% is calculated separately for each axis: 50% of the width for horizontal radius and 50% of the height for vertical radius. For a 200px wide, 40px tall button, the horizontal radius would be 100px and vertical radius 20px, producing an ellipse rather than a pill shape. Use 9999px for pill shapes because the browser caps the radius at the maximum useful value (half the shorter dimension), producing consistent fully rounded ends.

Use individual corner properties: border-top-left-radius and border-top-right-radius to round only the top, or border-bottom-left-radius and border-bottom-right-radius for only the bottom. There are no border-top-radius or border-left-radius shorthand properties in CSS; you must set each corner individually. A common shorthand approach is border-radius: 8px 8px 0 0 for rounded top corners only, using the four-value clockwise syntax: top-left, top-right, bottom-right, bottom-left.

Yes, for any project with more than one component. Defining CSS custom properties at :root level, such as --radius-sm: 4px, --radius-md: 8px, --radius-lg: 12px, creates a consistent scale that is easy to update globally. If the design direction shifts and you need to make all medium-radius components slightly rounder, changing one variable value updates every component simultaneously. Hardcoded pixel values require a find-and-replace across multiple files, which is error-prone on larger projects.

Border-radius itself has minimal performance impact. However, when an element has border-radius combined with overflow: hidden and a child element that is animated (moving, scaling, or changing opacity), the browser may struggle to composite the rounded clipped layer efficiently. This can cause jank on mobile devices. The standard fix is to add will-change: transform or transform: translateZ(0) to the container, promoting it to its own compositor layer so the rounding and clipping are handled on the GPU.

Yes, border-radius accepts em, rem, vw, vh, and other length units in addition to px and percentages. Using em makes the radius proportional to the element's font size, which can be useful for text-sized components like inline badges or tags that need to scale with the surrounding text. Using rem ties the radius to the root font size, useful for system-wide scaling when users change their browser font size preference. For most UI components, px values remain the most common and predictable choice.

The browser caps border-radius at a maximum that depends on the element's dimensions. If the sum of radii on adjacent corners would exceed the element's width or height, the browser applies a proportional reduction algorithm defined in the CSS specification. In practice, this means a very large value like 9999px on a 40px tall element produces a 20px radius (half the height), not an actual 9999px radius. All browsers implement this cap consistently, which is why large values work reliably for pill shapes.

Border-radius works normally on grid and flexbox items. The radius applies to the item's own border box and does not affect how the item is sized or placed within the grid or flex container. If a grid item stretches to fill a cell and has border-radius, the corners follow the stretched dimensions. One thing to verify is that no child element overflows the rounded corners: if a grid item contains an image or colored child that extends to the edges, add overflow: hidden to clip the child to the rounded boundary. Be aware that overflow: hidden on a grid item also disables scroll anchoring and can clip any focus outline drawn by browser defaults, so for keyboard-focusable cards inside a grid prefer mask-image: linear-gradient(black, black) or apply border-radius directly to the child media so the parent stays clean.

Border-radius applies to every paint layer including box-shadow, so a rounded card automatically gets a softly rounded shadow without extra effort. The typical card recipe is a thin border, a generous border-radius, and a stacked box-shadow with multiple offsets: border: 1px solid #e5e7eb, border-radius: 12px, box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06). The two shadow layers create depth without harsh edges, and the rounded shape carries through both layers automatically. For hover elevation, animate the box-shadow rather than the border-radius itself: keep the radius stable and increase shadow spread and y-offset on hover. Animating radius can produce visible corner clipping artifacts during the transition because the browser has to recompute the rounded mask each frame.

Border-radius for standard rounded buttons, every time. Clip-path on a button removes its ability to show a focus ring via outline, removes its box-shadow, and disables the visible default hover and focus indicators that browsers provide for accessibility. Keyboard users would lose the standard tab focus indicator, which is an accessibility regression. Border-radius is also dramatically simpler: a single property declaration handles standard rounded buttons including pill shapes (via 9999px), rounded-rectangle buttons, and asymmetric tab-top buttons. Reserve clip-path for non-rectangular shapes that border-radius genuinely cannot produce: hexagonal badges, arrow-pointed callouts, or speech-bubble buttons with tails. For everything else, border-radius is simpler, more accessible, and pairs cleanly with shadows and focus indicators out of the box.