⚙️ DevCSS

CSS Border-Radius Generator

CSS border-radius accepts up to 8 values (4 horizontal + 4 vertical radii), enabling any organic shape — from teardrops to blobs. Adjust the shape with sliders or pick a ready-made preset.

Horizontal radii

Top-left H30%

Top-right H70%

Bottom-right H60%

Bottom-left H40%

Vertical radii

Top-left V50%

Top-right V30%

Bottom-right V70%

Bottom-left V50%

border-radius: 30% 70% 60% 40% / 50% 30% 70% 50%;

Frequently asked questions

How does 8-value border-radius work?

The format is: border-radius: TL TR BR BL / TL TR BR BL. The first 4 values set the horizontal radius of each corner; the 4 values after the slash set the vertical radii. This makes each corner elliptical (independent horizontal and vertical radius).

What is a blob?

A blob is an organic, irregular shape created with asymmetric border-radius values. Blobs are widely used in modern web design for background elements, avatars, and decorative sections. They are achieved by setting different radii for each corner.

How do I apply this in CSS?

Copy the generated CSS and paste it into your element's styles: `.my-shape { border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%; }`. Add a `background` and the desired dimensions (`width`, `height`).

Related tools

Dev

CSS Gradient

Create linear and radial CSS gradients visually and copy the ready-to-use code.

Dev

CSS Box Shadow

Configure shadows visually — sliders for offset, blur, color, and opacity. Supports multiple shadow layers and comes with presets for popular styles.

Dev

Colour Palette

Choose a base color and get a harmonious palette: monochromatic, analogous, complementary, or triadic. Copy HEX codes in one click.

Need a full SEO audit?

Tools help with targeted tasks. For systematic growth — request a free review of your site.