Visually adjust CSS border-radius and copy the code
border-radius: 8px;Adjust each corner's radius using sliders
Toggle 'Link All' to sync all corners or adjust independently
Enable elliptical mode for horizontal/vertical control
Copy the CSS code and apply to your project
border-radius is a CSS property that rounds the corners of an element's border. 0 is square corners, larger values create rounder corners.
Each corner can have separate horizontal and vertical radii. Use a slash (/) to specify elliptical corners.
px is an absolute fixed size, while % is relative to the element's width and height. % creates responsive corners that scale with the element.
border-radius is a CSS property that allows you to independently round the four corners of an element. A value of 0 gives sharp corners, while 50% creates a circle. Buttons with moderate values of 8-16px give a friendly impression, and card components typically use 12-20px. Pill-shaped buttons use very large values like 9999px to maintain semicircular ends regardless of width.
border-radius: 8px is shorthand that applies the same value to all four corners. Two values set (top-left+bottom-right, top-right+bottom-left), while four values specify each corner clockwise. Using a slash (/) to set horizontal and vertical radii separately creates elliptical corners, enabling organic shapes like droplets, leaves, and speech bubbles.
Combining different values for each corner creates unique custom shapes. For example, border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% creates a wavy blob shape. It has better browser compatibility than CSS clip-path and works effectively with overflow: hidden for masking images into desired shapes. For a consistent design system, reusing the same radius values throughout a project is recommended.