CSS Border Radius Generator
Visual CSS border-radius generator. Adjust each corner independently with real-time preview and copy the generated CSS code instantly.
What is CSS border-radius?
CSS border-radius is a property that rounds the corners of an element's outer border edge. You can set each corner independently using one to four values, or control each corner individually with longhand properties like border-top-left-radius.
How do I make a perfect circle with border-radius?
Set border-radius to 50% on a square element (equal width and height). This creates a perfect circle. For an ellipse, use border-radius: 50% on a rectangular element.
What units can I use for border-radius?
Border-radius accepts px, %, em, rem, vw, vh and other CSS length units. Percentages are relative to the element's dimensions, while absolute units like px provide fixed values.
What is the shorthand syntax for border-radius?
The shorthand follows the pattern: top-left top-right bottom-right bottom-left. One value applies to all corners. Two values set top-left/bottom-right and top-right/bottom-left. Three values set top-left, top-right/bottom-left, and bottom-right.
Can I create elliptical corners?
Yes, using the slash (/) syntax you can define separate horizontal and vertical radii. For example, border-radius: 50% / 100px creates an elliptical curve with different horizontal and vertical radii.
Does border-radius work on all elements?
Border-radius works on most HTML elements including div, button, img and input. However, it may not clip overflow content on elements without overflow: hidden set.
Can I create complex shapes with border-radius?
Yes, by combining different radius values for each corner, you can create pills, ovals, leaves, and custom organic shapes. Percentage values work well for responsive designs.
Is border-radius supported in all browsers?
Yes, border-radius is supported in all modern browsers including Chrome, Firefox, Safari, Edge and mobile browsers. It has been part of CSS3 since 2011 with excellent compatibility.
How do I make a pill-shaped button?
Set border-radius to a value equal to or greater than half the element's height. For a 40px tall button, use border-radius: 20px or higher to create a pill shape.
Does border-radius affect background images?
Yes, border-radius clips the background, background-image and border of an element. The background automatically follows the rounded corners.
Can I animate border-radius?
Yes, border-radius is animatable with CSS transitions and animations. You can smoothly transition between different radius values for interactive hover and click effects.
Can I use border-radius with CSS transforms?
Yes, border-radius works well with CSS transforms like rotate, scale and translate. The rounded corners will transform along with the element.
How do I create a circle with a border?
Apply border-radius: 50% to a square element with equal width and height, then add a border property. The border will follow the circular shape.
What is the difference between individual corner properties and shorthand?
Individual properties like border-top-left-radius give you precise control over each corner. The shorthand border-radius lets you set multiple corners in one declaration. Both produce identical CSS output.
How to Use CSS Border Radius Generator
Shape rounded corners visually with this CSS border-radius generator. It runs entirely in your browser, and none of your data is uploaded.
- Choose px, %, em, or rem in the Unit dropdown.
- Drag the Top Left, Top Right, Bottom Right and Bottom Left sliders to round each corner independently.
- Switch on Link all corners to apply one value to every corner at once.
- Copy the generated CSS from the preview and paste it into your stylesheet.
Set every corner to 50% for a perfect circle or pill, and use em or rem so the radius scales with your typography.
Related Tools
- CSS Box Shadow Generator Free online CSS box-shadow generator. Visually create beautiful shadows with adjustable offset, blur, spread, color and inset. Live preview and instant code copy.
- CSS Gradient Generator Create stunning CSS gradients visually. Generate linear, radial & conic gradients with multiple color stops, custom angles and positions. Copy production-ready code instantly.
- CSS Grid Generator Free visual CSS Grid generator with live preview. Design responsive grid layouts interactively and export production-ready CSS code instantly.
- CSS Flexbox Generator Visual CSS Flexbox generator with live preview. Adjust flex properties and get ready-to-use CSS code instantly.
- Fancy Border Radius Generator Free online fancy border radius generator. Drag 8 handles or pick a blob preset to create organic CSS shapes and copy the border-radius code instantly.
- Color Converter Free online color converter. Convert HEX, RGB, HSL, HSV formats instantly with visual picker. 100% private, runs in your browser.
- CSS Easing Generator Free online CSS easing generator. Drag the cubic-bezier control points on an interactive curve, choose from 18 presets, watch a looping ball preview and copy the timing function instantly.
- Text Shadow Generator Free online text-shadow generator. Stack multiple shadow layers with offset, blur, color and opacity, try Neon, 3D, Retro and Glow presets, and copy the CSS instantly.