Create perfect CSS rounded corners with a live visual editor. Adjust each corner independently, choose units (px, %, em, rem), and copy ready-to-use CSS instantly. 100% free and client-side.
border-radius: 8px; The CSS Border Radius Generator is a visual tool for creating custom rounded corners on HTML elements. Unlike guessing values, this tool lets you fine-tune each corner independently — top-left, top-right, bottom-right, and bottom-left — with your choice of units (px, %, em, rem). It automatically generates the most compact CSS syntax, using shorthand notation when corners are symmetrical. Whether you need a subtle rounded card, a perfect circle, a pill-shaped button, or an organic leaf shape, this tool makes it effortless. All processing happens in your browser — no data is sent anywhere.
The CSS border-radius property rounds the corners of an element's outer border edge. You can set a single radius to make all corners the same, or set up to four values to control each corner individually. When using percentage values, 50% creates a perfect circle or ellipse depending on the element's aspect ratio.
Use px for fixed pixel-perfect corners (e.g., 8px for cards), % for relative sizing that scales with the element (e.g., 50% for circles), em/rem for corners that scale with font size. For buttons and cards, px is most common. For responsive shapes, % works best.
CSS border-radius supports 1-4 values: 1 value = all corners; 2 values = top-left+bottom-right and top-right+bottom-left; 3 values = top-left, top-right+bottom-left, bottom-right; 4 values = top-left, top-right, bottom-right, bottom-left. This tool automatically detects symmetry and outputs the shortest valid syntax.
Yes. The generated border-radius syntax follows the CSS3 standard and works in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. No vendor prefixes are needed for current browser versions.