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.