CSS Border Radius Generator

Create smooth, rounded corners for your elements with this easy-to-use CSS Border Radius Generator. Adjust all corners at once or fine-tune each corner individually to achieve unique shapes. This tool provides a live preview and instantly generates clean, copy-ready CSS code for images, divs, textareas, and more no manual coding required.

Contents

What is Border Radius?
Live Border Radius Generator
Border Radius Styles
Radius Animation Effects

What is Border Radius?

The CSS border-radius property is used to create rounded corners on elements. Instead of sharp 90-degree edges, you can apply smooth curves to one or more corners of an element like a div, image, button, or textarea. It helps improve the visual appearance of UI components

You can apply the same radius to all corners or define each corner individually for more complex shapes. The value is typically set in pixels (px), percentages (%), or other CSS units.

CSS Border Radius Examples

Basic Example (Equal Rounded Corners)

CSS

.box {
	border-radius: 10px;
}

Different Corner Values

CSS

.box {
  border-radius: 10px 20px 30px 40px;
}

Circular Shape Example

CSS

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Elliptical Border Radius

CSS

.box {
  border-radius: 50% / 25%;
}

Border Radius for Individual Corners

You can also control each corner separately using individual properties:

CSS

.box {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

Explanation:

border-radius: 10px; → Applies equal rounding to all corners
border-radius: 10px 20px 30px 40px; → Top-left, top-right, bottom-right, bottom-left
border-radius: 50%; → Creates a perfect circle (when width and height are equal)
border-radius: 50% / 25%; → Applies horizontal radius of 50% and vertical radius of 25%, creating an elliptical (oval) corner shape

Online Border Radius Generator

Simply move the sliders or enter values to set the border radius. You can apply the same radius to all corners or customize each corner independently (top-left, top-right, bottom-right, bottom-left). The preview updates in real time, and the CSS code is generated instantly for quick use in your project.

Features of This Tool

Set uniform border radius for all corners
Customize each corner individually
Choose unit size (px or %)
Live preview of rounded shapes
Works for images, divs, inputs, and textareas
Instant copy CSS code output

Shape Presets

Select Element:

div box Image Textbox

Preview Radius

border-radius: 10px;

Radius Size

Border Radius Type

Size unit

px %

⛶ All Corners

Set Element Size

Width

Height

Generated Border Radius HTML and CSS code

HTML

<div class="radius">CSS Border Radius</div>

CSS

.radius {
    border-radius: 50px;

    background-color: #bb06ad;
    color: #fff;
    line-height: 150px;
    text-align: center;
    width: 150px;
    height: 150px;
}

Why Use Border Radius?

Border radius enhances UI design by softening edges, improving visual hierarchy, and creating modern layouts. It is widely used in cards, buttons, images, input fields, and containers to create a clean and user-friendly interface.

Examples:

Rounded buttons
Profile images (circle avatars)
Cards and containers
Input fields & textareas
Modern UI components

Border Radius Styles & Code Examples

Explore a variety of border-radius styles with live previews and ready-to-use CSS code. This section demonstrates common patterns like uniform corners, individual corner control, and advanced elliptical shapes, helping you quickly understand and apply the right style in your projects.

Pill Shape

border-radius: 50px;

Circle Shape

border-radius: 50%;

Asymmetric

border-radius: 40px 10px 60px 5px;

Elliptical 1

border-radius: 50% / 20%;

Elliptical 2

border-radius: 100px / 50px;

Leaf

border-radius: 0 50% 0 50%;

Inverse leaf

border-radius: 50% 0 50% 0;

Squircle

border-radius: 30%;

Blob 1

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

Blob 2

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

Speech Bubble

border-radius: 40% 40% 40% 0% / 40% 40% 40% 0%;

Tombstone

border-radius: 50% 50% 0% 0% / 100% 100% 0% 0%;

Crescent

border-radius: 80% 20% 20% 80% / 80% 80% 20% 20%;

Teardrop

border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;

Egg Shape

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

Teardrop / Pin

border-radius: 50% 50% 50% 0;

Border Radius Animation Effects

Discover smooth and dynamic border-radius animations with live previews and clean CSS code examples. This section showcases how corner shapes can transition and morph over time using keyframes and transitions

Morphing Blob

Continuously animates between organic blob shapes.

HTML

<div class="radius-animation-1"></div>

CSS

.radius-animation-1 {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #2100ff, #ff003a);
    animation: morphBlob 2s ease-in-out infinite;
}

@keyframes morphBlob {
    0%, 100% {   border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%  }
    50%      { border-radius: 40% 60% 60% 40% / 30% 40% 60% 50% }
}

Corner Flip

Toggles diagonally between rounded corner pairs.

HTML

<div class="radius-animation-2"></div>

CSS

.radius-animation-2 {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #00ffa3, #2100ff);
    animation: spinRound 2s ease-in-out infinite;
}

@keyframes spinRound {
    0%   { border-radius: 50% 0 }
    50%  { border-radius: 0 50% }
    100% { border-radius: 50% 0 }
}

Squish to Pill

Animates from sharp rectangle to pill shape

HTML

<div class="radius-animation-3"></div>

CSS

.radius-animation-3 {
    width: 120px;
    height: 50px;
    background: linear-gradient(135deg, #ffa300, #ff003a);
    animation: squishPill 2s ease-in-out infinite;
}

@keyframes squishPill {
    0%, 100% { border-radius: 8px }
    50%      { border-radius: 100px }
}

Ripple Wave

Each corner blooms round one by one in clockwise sequence

HTML

<div class="radius-animation-4"></div>

CSS

.radius-animation-4 {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #00e9af, #006eff);
    animation: rippleTL 2.4s ease-in-out infinite 0s,
        	   rippleTR 2.4s ease-in-out infinite 0.6s,
               rippleBR 2.4s ease-in-out infinite 1.2s,
               rippleBL 2.4s ease-in-out infinite 1.8s;
}

@keyframes rippleTL {
	0%, 100% { border-top-left-radius: 8px }
	25%      { border-top-left-radius: 50% }
	75%      { border-top-left-radius: 8px }
}
@keyframes rippleTR {
	0%, 100% { border-top-right-radius: 8px }
	25%      { border-top-right-radius: 50% }
	75%      { border-top-right-radius: 8px }
}
@keyframes rippleBR {
	0%, 100% { border-bottom-right-radius: 8px }
	25%      { border-bottom-right-radius: 50% }
	75%      { border-bottom-right-radius: 8px }
}
@keyframes rippleBL {
	0%, 100% { border-bottom-left-radius: 8px }
	25%      { border-bottom-left-radius: 50% }
	75%      { border-bottom-left-radius: 8px }
}

Frequently Asked Questions (FAQ)

What is border-radius in CSS?

The border-radius property in CSS is used to create rounded corners on elements such as divs, images, buttons, and textareas.

How do I make a circle using border-radius?

Set border-radius to 50% and ensure the element has equal width and height to create a perfect circle.

Can I set different border-radius values for each corner?

Yes, you can define four values in border-radius to control each corner individually: top-left, top-right, bottom-right, and bottom-left.

What is elliptical border-radius?

Elliptical border-radius allows you to define horizontal and vertical radii using a slash, such as border-radius: 50% / 25%, creating oval-shaped corners.

Why is border-radius not working?

Border-radius may not work if overflow is hidden incorrectly, the element has no visible background or border, or the dimensions are not properly set.

Does border-radius work on images?

Yes, border-radius works on images and is commonly used to create rounded or circular image shapes.

Report Problem