Utilko logo Utilko

Border Radius Generator

Visually design CSS border-radius values for rounded corners and complex shapes. Get the exact CSS code for any corner radius combination.

Used 8.3K times today

Border Radius Generator

px
px
px
px
border-radius: 12px;

How to Use Border Radius Generator

  1. 1

    Set corner radius values

    Use the sliders or input fields to set the border radius for each corner (top-left, top-right, bottom-right, bottom-left) in pixels or percentage.

  2. 2

    Preview the shape

    See a live preview of your element's shape update in real time as you adjust values. Use the advanced mode for elliptical corners.

  3. 3

    Copy the CSS

    Click "Copy CSS" to get the shorthand or full border-radius CSS property for your element.

Frequently Asked Questions

Can I create different radius values for each corner?
Yes. You can set individual values for all four corners independently. The generator outputs the efficient CSS shorthand when possible, or the full four-value notation when needed.
What is elliptical border radius?
CSS border-radius supports two values per corner separated by a slash (e.g., 50px / 30px), creating an elliptical arc instead of a circular one. This enables organic, blob-like shapes.
Can I create a perfect circle with border-radius?
Yes. Set border-radius to 50% on a square element to make a perfect circle. The generator's quick preset includes a circle option.

About Border Radius Generator

The Border Radius Generator on Utilko provides a visual interface for designing rounded corner styles for any HTML element. From subtle rounded buttons to pill shapes and complex organic blobs, border-radius is one of CSS's most versatile properties.

Control each corner independently, switch between pixel and percentage units, and explore advanced elliptical corner values — all with a live shape preview. The generated CSS is clean and copy-ready for immediate use in any stylesheet.

More SEO & Web Tools Tools

Meta Tag Generator

Generate complete HTML meta tags for SEO including title, description, robots, viewport, and canonical tags. Preview how your page appears in search results.

Open Graph Generator

Generate Open Graph and Twitter Card meta tags for rich social media previews. Preview how your link looks when shared on Facebook, Twitter, and LinkedIn.

Robots.txt Generator

Generate a valid robots.txt file for your website. Control which pages search engine crawlers can access and set your XML sitemap location.

Sitemap Generator

Generate a valid XML sitemap for your website. Enter your URLs, set priority and change frequency, and download a standards-compliant sitemap.xml.

Schema Markup Generator

Generate JSON-LD structured data markup for articles, products, FAQs, breadcrumbs, and more. Boost rich snippets in Google search results.

Google Fonts Previewer

Preview any Google Font with your own custom text. Browse font weights, styles, and sizes, then copy the embed code for your website.

CSS Gradient Generator

Create beautiful CSS linear, radial, and conic gradients with a visual editor. Copy the CSS gradient code for direct use in your stylesheet.

Box Shadow Generator

Visually design CSS box shadows with controls for offset, blur, spread, color, and inset. Copy the box-shadow CSS property instantly.