Skip to content
SPCX Tools

Border Radius

Design CSS rounded corners and shapes visually, then copy the code with one click.

Runs locally — files never leave your device

Loading tool…

How to use Border Radius

  1. 1Choose your preferred unit ("px" for fixed curves or "%" for responsive shapes).
  2. 2Use the "Link corners" checkbox to adjust all corners together, or uncheck it to set individual values for each corner.
  3. 3Drag the sliders to adjust the border radius and watch the preview shape update in real time.
  4. 4Alternatively, click one of the preset buttons to instantly create common shapes like pills, circles, tabs, or leaves.
  5. 5Copy the generated CSS code at the bottom to use in your stylesheet.

A visual border radius generator

Crafting the perfect rounded edges for your web components shouldn't require guessing numbers and constantly refreshing your browser. This visual border radius generator allows you to adjust sliders and instantly see how the curves affect an element. Once you achieve the exact look you want, you can copy the optimized CSS snippet directly to your clipboard.

Because all calculations and previews are handled locally by your browser, the tool is incredibly fast and entirely private. Nothing you design or click is ever uploaded to a server.

Mastering CSS rounded corners

The border-radius property is a fundamental part of modern web design, used to soften harsh edges on buttons, images, modals, and layout containers. While it seems simple on the surface, the syntax can be surprisingly nuanced when you want to target specific corners.

This border-radius css generator helps you understand and utilize the CSS shorthand syntax effectively. When you link all corners together, the tool outputs a single value (for example, border-radius: 16px;). If you unlink the corners to create a custom shape, the generator automatically formats the CSS based on your inputs:

  • Four values: If all corners are different, the CSS applies them in a clockwise order starting from the top-left (e.g., border-radius: 16px 8px 4px 2px;).
  • Two values: If the top-left matches the bottom-right, and the top-right matches the bottom-left, the tool smartly condenses the code into two values (e.g., border-radius: 16px 0;).

Pixels vs. Percentages

One of the most common dilemmas when writing rounded corners css is choosing the right unit. This tool lets you easily toggle between pixels (px) and percentages (%), each serving a distinct purpose in UI design.

Pixels (px) are absolute units. A 12px border radius will always look exactly the same, whether it's applied to a tiny button or a massive hero image. Pixels are the standard choice for UI components like cards, dropdown menus, and input fields because they maintain a consistent, uniform design language across your entire application. This tool allows pixel values up to 200px.

Percentages (%) are relative to the size of the element itself. A 50% border radius on a square element will always create a perfect circle, regardless of whether that square is 50 pixels wide or 500 pixels wide. If the element is a rectangle, 50% will create an elliptical oval shape. Percentages are ideal for responsive elements like profile avatars or decorative background blobs. This tool caps percentage values at 50%, as values beyond this do not increase the visual rounding effect in CSS.

Beyond basic corners: A CSS shape generator

While mostly used for subtle rounding, border-radius is also a powerful css shape generator. By unlinking the corners and mixing extreme values, you can create unique geometric shapes without needing SVG files or complex clip-paths. The tool includes several presets to demonstrate this:

  • Pill: By applying an artificially high pixel value (like 9999px) to all corners, you create a "pill" or stadium shape. This is widely used for badges, tags, and modern call-to-action buttons. The browser caps the actual rounding at exactly half the height of the element, ensuring perfect semi-circles on the edges.
  • Circle: Setting all corners to 50% transforms a square into a perfect circle.
  • Leaf: By setting the top-left and bottom-right corners to 0, and the top-right and bottom-left corners to a high value (like 48px), you create an asymmetrical, organic leaf shape.
  • Tab: By rounding only the top-left and top-right corners (e.g., 16px) while leaving the bottom corners at 0, you create a classic folder tab shape, perfect for navigation menus.

Perfecting your UI components

Rounded corners rarely exist in isolation; they are usually part of a broader, cohesive design system. A well-designed card component, for instance, pairs a subtle border radius with depth and color to stand out on the page.

Once you have generated your ideal border radius, you can combine it with other CSS effects to complete your design. Try pairing your new shape with a soft drop shadow using our Box Shadow Generator to create an elevated, floating effect. If you are styling a button or a decorative background element, you can apply a vibrant background using the CSS Gradient Generator, or find the perfect complementary solid colors with the Color Palette Generator.

Frequently asked questions

What is the CSS border-radius property?
The border-radius CSS property rounds the corners of an element's outer border. You can set a single radius to make a circle or rounded rectangle, or specify different radii for each corner to create complex shapes.
Should I use pixels (px) or percentages (%)?
Use pixels (px) when you want a fixed, consistent curve regardless of the element's size, such as a standard 8px rounded card. Use percentages (%) when you want the curve to scale with the element, like using 50% to create a perfect circle or oval.
How do I make a perfect circle in CSS?
To make a perfect circle, your HTML element must have an equal width and height (a square), and the border-radius must be set to 50%. You can use the "Circle" preset in this tool to generate the exact code.
How do I make a pill shape?
A pill shape is created by setting a very high pixel value for the border radius, such as 9999px. This ensures the left and right (or top and bottom) edges are fully rounded semi-circles, regardless of the element's width.
Why does the generated CSS sometimes have fewer than four values?
CSS uses a shorthand for border-radius. If all four corners are the same, it outputs one value (e.g., 16px). If the top-left/bottom-right match and the top-right/bottom-left match, it outputs two values. This keeps your CSS clean and concise.
Is my design data saved anywhere?
No, this border radius generator runs entirely in your browser. No data is sent to or stored on any server, ensuring a fast and private experience.

Related tools

Box Shadow GeneratorFine-tune soft, sharp, layered or inset shadows with a live preview and copy the CSS.CSS Gradient GeneratorDesign a gradient background visually and copy the CSS — linear, radial or conic.Color Palette GeneratorPick one color and get a harmonious five-color palette based on color theory.Color Blindness SimulatorPreview your images through the eyes of someone with color vision deficiency to ensure your designs are accessible.Color Contrast CheckerCheck whether your text is readable enough — and get the closest color that passes WCAG.Color ConverterConvert any color between HEX, RGB, HSL, HSV and CMYK, and check its contrast.