CSS Border Radius Editor

Visually generate `border-radius` CSS properties. Adjust each corner individually or uniformly, see live results, and instantly get the CSS code.

Preview

Controls

px

Individual Corner Radii

Adjust values in px

px
px
px
px

Preview Settings

px
px

How to Use the CSS Border Radius Editor

  1. Adjust Uniform Radius: Use the "Uniform Radius" slider or number input to apply the same border-radius to all four corners of the preview box.
  2. Customize Individual Corners: For more precise control, use the sliders and number inputs under "Individual Corner Radii" for Top-Left, Top-Right, Bottom-Right, and Bottom-Left. When you adjust an individual corner, the uniform slider will no longer control all corners.
  3. Change Preview Box Size: Use the "Width" and "Height" sliders/inputs under "Preview Settings" to change the dimensions of the preview box.
  4. Set Background Color: Choose a background color for the preview box using the color picker under "Preview Settings" to better visualize the radius effect.
  5. View Generated CSS: The "Generated CSS" textarea will automatically update with the `border-radius` property as you make adjustments.
  6. Copy Code: Click the "Copy Code" button to quickly copy the generated CSS to your clipboard.
  7. Reset All: Click the "Reset All" button to revert all settings and the preview box to its default square shape with uniform radius.

Experiment with different values to create unique rounded corners for your web elements!