# CSS Border Radius Generator

Generate CSS border-radius properties

> Canonical page: https://elysiatools.com/en/tools/border-radius-generator

- **Category:** Design

- **Keywords:** css, border-radius, radius, corner, generator, style

## Overview

The CSS Border Radius Generator allows you to quickly create and preview custom corner rounding for your web elements. Simply adjust the sliders for each corner to generate precise CSS code ready for your stylesheet.

## Inputs

- **Uniform Radius** (checkbox)
- **Top-Left (px)** (range)
- **Top-Right (px)** (range)
- **Bottom-Right (px)** (range)
- **Bottom-Left (px)** (range)

## When to use

- When you need to create consistent rounded corners for UI components like buttons or cards.
- When you want to experiment with asymmetrical corner shapes for unique design layouts.
- When you need to quickly generate the exact CSS syntax for a specific border-radius configuration.

## How it works

- Adjust the individual sliders for Top-Left, Top-Right, Bottom-Right, and Bottom-Left corners to set your desired pixel values.
- Enable the 'Uniform Radius' option to lock all corners to the same value for symmetrical styling.
- Copy the generated CSS property directly from the output box to paste into your project's CSS file.

## Use cases

- Styling modern card components with subtle rounded corners.
- Creating pill-shaped buttons for call-to-action sections.
- Designing unique, asymmetrical shapes for decorative image containers.

## Frequently asked questions

### Can I set different values for each corner?

Yes, by disabling the 'Uniform Radius' checkbox, you can independently adjust each of the four corners.

### What is the maximum radius I can set?

You can set a radius value between 0px and 100px for each corner.

### Does this tool generate shorthand CSS?

Yes, the tool provides the standard border-radius CSS property based on your selected values.

### Is the generated code compatible with all browsers?

Yes, the border-radius property is supported by all modern web browsers.

### Can I use percentages instead of pixels?

This specific tool is optimized for pixel-based values to ensure precise control over corner rounding.

## Related tools

- [CSS Animation Generator](https://elysiatools.com/en/tools/animation-generator): Generate CSS animation keyframes and properties
- [CSS Backdrop Filter Generator](https://elysiatools.com/en/tools/backdrop-filter-generator): Generate CSS backdrop-filter properties for glassmorphism effects
- [CSS Box Shadow Generator](https://elysiatools.com/en/tools/box-shadow-generator): Generate CSS box-shadow properties
- [CSS Clip Path Generator](https://elysiatools.com/en/tools/clip-path-generator): Generate CSS clip-path properties for custom shapes
- [CSS Filter Generator](https://elysiatools.com/en/tools/css-filter-generator): Generate CSS filter properties
- [CSS Transform Generator](https://elysiatools.com/en/tools/transform-generator): Generate CSS transform properties
- [Color Gradient Generator](https://elysiatools.com/en/tools/color-gradient-generator): Generate smooth color gradients between multiple colors with customizable steps and formats
- [Color Generator](https://elysiatools.com/en/tools/color-generator): Generate random colors and color palettes

## Samples

- [CSS Viewer Samples](https://elysiatools.com/en/samples/css-viewer-samples): Sample CSS stylesheets (variables, flexbox/grid, animations) for the in-browser CSS Viewer
- [Bulma CSS Framework Samples](https://elysiatools.com/en/samples/bulma): Bulma CSS framework examples including columns, components, form controls, layout system, and modern CSS-based design patterns
- [CSS Selector Samples](https://elysiatools.com/en/samples/css-selectors): Collection of CSS selector examples for extraction and analysis testing
- [Milligram CSS Framework Samples](https://elysiatools.com/en/samples/milligram): Milligram CSS framework examples including typography, forms, grids, and components

## Related content

- [Color System and CSS Effect Design Workflow](https://elysiatools.com/en/hubs/design-generate): Extract a palette, build accessible color relationships, generate tokens, and apply CSS effects that stay consistent in real interface states.