Free · Fast · Privacy-first

CSS Border Radius Generator

Getting the right border-radius values requires understanding both the shorthand and the individual corner properties, plus the less obvious elliptical syntax that lets you create asymmetric curves.

⚡

Set all four corners independently or symmetrically

🔒

Supports pixel values, percentage values, and elliptical slash notation

✨

Live preview updates on every input change

⚡

Generates concise shorthand output automatically

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.

Border-Radius Shorthand, Individual Corners, and Elliptical Syntax

The border-radius shorthand sets all four corners at once. One value applies the same radius to every corner. Two values set top-left and bottom-right with the first value, and top-right and bottom-left with the second. Three values set top-left, then top-right and bottom-left together, then bottom-right. Four values set top-left, top-right, bottom-right, and bottom-left in clockwise order. The individual properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. These are useful when you need to override a single corner after setting the shorthand, such as giving only the top-left and top-right corners a radius for a card header.

Percentage values make border-radius responsive. A value of 50% on a square element produces a perfect circle, because 50% of each side meets at the center. On a non-square element, 50% produces an ellipse rather than a circle. This is the standard technique for circular avatar images: set width and height to the same pixel value and apply border-radius: 50%. For pill-shaped buttons, a very large pixel value like 9999px is more reliable than 50% because it always produces a full semicircle on the short sides regardless of the element's aspect ratio.

Elliptical border-radius uses a slash to separate horizontal and vertical radii. The syntax is border-radius: horizontal / vertical, for example border-radius: 40px / 20px. This produces corners where the horizontal curve is wider than the vertical curve, creating an egg-like shape. You can also apply the elliptical syntax per corner: border-top-left-radius: 40px 20px sets a 40px horizontal and 20px vertical radius on just that corner. This level of control is useful for organic shapes, leaf-like elements, or decorative section dividers that need irregular curves.

Border-radius and clip-path overlap in capability but solve different problems, and choosing the right one affects both appearance and interaction. Border-radius rounds the four corners of the element's box and applies cleanly to backgrounds, borders, and box-shadow without extra work. Clip-path can produce any polygon, circle, or path shape including asymmetric and non-rectangular forms that border-radius cannot reach (octagons, arrows, speech bubbles, hexagons). The tradeoff is that clip-path does not produce a border: the clipped edge has no outline, and box-shadow on a clipped element is also clipped, which usually means no shadow at all. Clipped elements also cannot have a visible focus ring drawn by outline. For standard rounded corners with borders and shadows, border-radius is the right tool. Reach for clip-path only when you genuinely need a non-rectangular shape and can accept losing the standard border and shadow behaviour.

MDN: border-radius W3C CSS Backgrounds and Borders: border-radius

How to use this tool

💡

Enter a value in pixels to round all four corners equally, or unlock individual corners to set different radii per corner. Switch to percentage mode for responsive elements. Use the slash notation for elliptical curves where horizontal and vertical radii differ.

How It Works

Step-by-step guide to css border radius generator:

1
Enter a base radius value
Type a pixel or percentage value in the all-corners input to apply the same radius to all four corners. This is the starting point for most use cases.
2
Unlock individual corners if needed
Toggle per-corner mode to set different values for each corner. Enter values for top-left, top-right, bottom-right, and bottom-left independently.
3
Switch to elliptical mode for asymmetric curves
Enable the slash notation to set separate horizontal and vertical radii per corner. This is for advanced organic shapes rather than standard rounded corners.
4
Copy the output CSS
Click Copy CSS to get the generated border-radius declaration. The tool outputs the most concise shorthand that represents your corner values accurately.

Real-world examples

Common situations where this approach makes a real difference:

Circular avatar images

Profile pictures and avatars use border-radius: 50% on a square container with overflow: hidden. The container must have equal width and height set explicitly; percentage radius on a non-square element produces an ellipse. A typical implementation sets the img to width: 100% height: 100% object-fit: cover inside a fixed-size div with border-radius: 50% and overflow: hidden.

Pill-shaped badges and tags

Badge and tag components use border-radius: 9999px to achieve fully rounded ends. This value is large enough that the radius is always capped at half the element's height, producing consistent semicircular ends regardless of the badge text length. Percentage values would produce ellipses on wider badges, so the large pixel value is the reliable approach.

Card components with rounded tops only

Cards that attach to a grid or sit flush with other elements often need rounded tops but flat bottoms. Border-radius: 8px 8px 0 0 achieves this. The shorthand two-value or four-value forms are both correct; four values make the intent clearest: border-radius: 8px 8px 0 0 explicitly zeros out the bottom corners rather than relying on shorthand inference.

Decorative blob backgrounds for landing pages

Blob shapes using the elliptical syntax add visual interest to marketing sections. A starting point is border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Each of the eight values controls one axis of one corner. Animating these values with a CSS keyframe animation or JavaScript produces the fluid blob animations popular in modern landing pages.

Pro tips

Get better results with these expert suggestions:

Use asymmetric shorthand to shape card tops

Border-radius: 8px 8px 0 0 rounds only the top-left and top-right corners, which is the standard treatment for card headers that sit above a flat card body. This avoids repeating individual corner properties and keeps the CSS declaration compact and readable.

Elliptical radii create organic decorative shapes

The slash syntax border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% produces a blob-like shape useful for decorative section backgrounds. Each value pair before and after the slash controls the horizontal and vertical radii independently per corner, giving you full control over organic curves.

Border-radius respects the box model

Border-radius clips the visible border, background, and box-shadow of an element at the corners. However, it does not clip child elements unless you add overflow: hidden. This distinction matters when a child element has its own background or border that should follow the parent's rounded shape.

Transition border-radius for interactive morphing effects

Adding transition: border-radius 0.3s ease to an element and changing the value on :hover creates a morphing effect. For example, a square button can animate into a circle on hover: { border-radius: 4px } to :hover { border-radius: 50% }. This works well for icon buttons and toggle elements.

Use 9999px for pill shapes instead of 50%

Setting border-radius: 9999px always produces a pill shape regardless of element dimensions. With 50%, a rectangle becomes an ellipse rather than a pill. Use 9999px on buttons and badges for a consistent rounded-end appearance that does not depend on aspect ratio.

Combine with overflow: hidden for image clipping

Border-radius on a container clips its content only when combined with overflow: hidden. Without it, child images and elements with backgrounds bleed outside the rounded corners. Always set overflow: hidden on bordered containers that hold images or backgrounds.

Use percentage for circles on square elements

Border-radius: 50% on any element with equal width and height produces a perfect circle. This is the standard way to create round avatar images. For the circle to work, the element must have explicitly set equal dimensions.

FAQ

Frequently asked questions

The border-radius shorthand sets all four corners at once using one to four values in clockwise order: top-left, top-right, bottom-right, bottom-left. Individual properties like border-top-left-radius and border-bottom-right-radius target a single corner. The shorthand is more concise for symmetrical shapes; individual properties are cleaner when you only need to change one corner after the shorthand sets the rest. Mixing both in the same rule is valid, but the individual property must come after the shorthand to override it.

Set equal width and height on the element, then apply border-radius: 50%. The equal dimensions are required: on a rectangle, 50% creates an ellipse rather than a circle. A typical implementation is: .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }. Adding overflow: hidden ensures child images are clipped to the circular shape. For images, set the img to width: 100%; height: 100%; object-fit: cover to fill the circle without distortion.

The slash separates horizontal and vertical radii for elliptical corners. Border-radius: 40px / 20px sets a 40px horizontal and 20px vertical radius on all four corners. The values before the slash are horizontal radii; after the slash are vertical radii. You can combine per-corner values with the slash: border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px applies different elliptical radii to each corner. This syntax enables organic curved shapes that cannot be achieved with uniform radii.

Border-radius clips the element's own background and border painting but does not clip child elements by default. To clip children, add overflow: hidden to the parent. This is commonly needed when placing an image inside a rounded container: without overflow: hidden the image corners appear outside the rounded border. The same applies to any child element that extends to the parent's edges, such as navigation headers inside rounded modals or colored sections in rounded cards.

Box-shadow follows the shape of the element including its border-radius. A box-shadow on a fully rounded element appears as a circular or oval shadow, not a square one. The shadow offset, blur, and spread are calculated from the rounded outline of the element. This means you do not need to do anything special to get a correctly shaped shadow on rounded elements. However, inset box-shadows are also clipped by border-radius, appearing only within the rounded area.

Yes, using the individual corner properties: border-top-left-radius: 40px 20px sets the top-left corner to 40px horizontal and 20px vertical. The shorthand slash notation covers all four corners at once. Individual properties accept two space-separated values for the horizontal and vertical radii of that specific corner. This is more precise than the shorthand slash notation when you only need elliptical curves on specific corners and standard circular curves on the rest.

No. Border-radius is purely a visual property that affects how the element is painted, not its layout dimensions. The element still occupies its full rectangular box in the document flow. Adjacent elements are positioned relative to the rectangular bounding box, not the visible rounded shape. This means there can be visual gaps between a rounded element and its neighbors even though no layout space exists there. If you need the interactive or clickable area to match the visual shape, additional techniques like clip-path are required. The same gotcha applies to pointer-events: a click registered just inside the rectangular bounding box but outside the visible rounded corner still triggers the element's handler. For circular avatar buttons this is rarely an issue, but for tightly packed grids of rounded tiles it can produce phantom clicks where the cursor was clearly over an adjacent tile visually. Adding clip-path: inset(0 round var(--radius)) keeps the layout box intact while constraining pointer hits to the visible shape, which is a clean fix for grids of circular media thumbnails or pill-shaped tags arranged in a flex row. The same applies to drag-and-drop targets: if the drop zone is a circle defined only by border-radius, an item dropped into the corner of the bounding box still counts as a successful drop even though it never visually entered the circle. Adding the matching clip-path makes the drop region match the visual region, which is the behaviour users actually expect from rounded targets in a board or kanban layout.

There is no enforced maximum, but the browser caps the effective radius at half the element's width or height, whichever is smaller for that axis. Setting border-radius: 9999px on a 40px tall element produces a 20px radius, which is exactly half the height. Values beyond that cap are ignored in rendering. This is why 9999px is used for pill shapes: it guarantees the maximum possible radius without needing to know the element's exact dimensions. Percentage values work differently and are calculated relative to the element's dimensions.

Use clip-path when the shape you need cannot be expressed as four corner radii: hexagons, parallelograms, arrows, speech bubbles with tails, and any polygon are clip-path territory. Use border-radius for any standard rounded-corner shape including circles, ellipses, pills, and rectangles with mixed corner curves. The tradeoff is that clip-path clips the entire visible rendering: the element loses its border outline, box-shadow is clipped along with everything else, and the standard focus ring drawn by outline is also clipped. For accessibility, this matters because keyboard users need a visible focus indicator. Clip-path elements either need a separate focus indicator using an internal element or a JavaScript-managed wrapper. Border-radius elements get focus rings and shadows for free. Pick clip-path when the shape genuinely cannot be expressed otherwise.

Border-radius applies to every paint layer on the element including the border, background, and box-shadow, so a rounded element automatically gets a rounded shadow without extra configuration. The shadow follows the outline of the rounded border-box, producing the soft curved drop that makes rounded cards look correct. Inset box-shadows are also clipped to the rounded shape, painting inside the border-radius rather than overflowing. The one detail to watch is that an inner child element with a contrasting background does not automatically follow the parent's radius. If the child extends to the parent's edges, add overflow: hidden to the parent so the child is clipped to the rounded boundary. Without that clip, the child paints square corners that visibly poke past the parent's rounded edges.