CSS Border Radius Explained: How to Create Smooth UI Corners

CSS border-radius is one of the simplest properties in CSS, but it has a big impact on how an interface feels.

Sharp corners can make a design feel rigid, technical or formal. Rounded corners can make cards, buttons, modals, images and panels feel softer, friendlier and more modern.

But good rounded corners are not just about adding the same radius everywhere.

A button, a card, an avatar and a modal should not always use the same value. The best border radius depends on the size, purpose and visual style of the element.

In this guide, you will learn how CSS border radius works, how to choose better radius values and how to generate smooth UI corners with the free CSS Border Radius Generator by Free Utilities Online.

What Is CSS Border Radius?

CSS border-radius is the property used to round the corners of an element.

A basic example looks like this:

.card {
  border-radius: 16px;
}

This rounds all four corners of the element by the same amount.

You can use border-radius on many UI elements, including:

  • cards;

  • buttons;

  • images;

  • modals;

  • inputs;

  • badges;

  • avatars;

  • tooltips;

  • containers;

  • dropdowns;

  • navigation items.

Rounded corners are one of the easiest ways to make an interface feel more polished.

Basic Border Radius Syntax

The simplest syntax is:

border-radius: 12px;

This applies the same radius to all four corners.

You can also use different values for each corner:

border-radius: 12px 24px 12px 24px;

The values are applied in this order:

top-left top-right bottom-right bottom-left

So this:

border-radius: 12px 24px 32px 8px;

Means:

top-left: 12px
top-right: 24px
bottom-right: 32px
bottom-left: 8px

This lets you create more custom and organic shapes.

Border Radius with One, Two, Three or Four Values

CSS border radius can use one to four values.

One Value

border-radius: 16px;

All corners use the same radius.

Two Values

border-radius: 16px 32px;

This means:

top-left and bottom-right: 16px
top-right and bottom-left: 32px

Three Values

border-radius: 16px 32px 8px;

This means:

top-left: 16px
top-right and bottom-left: 32px
bottom-right: 8px

Four Values

border-radius: 16px 32px 8px 24px;

This controls every corner individually:

top-left: 16px
top-right: 32px
bottom-right: 8px
bottom-left: 24px

Most UI components use one value, but asymmetric values can create more expressive shapes.

Border Radius with Percentages

You can use percentages instead of pixels.

Example:

.avatar {
  border-radius: 50%;
}

If the element is a square, border-radius: 50% creates a circle.

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

This is commonly used for:

  • profile pictures;

  • circular icons;

  • round badges;

  • image thumbnails;

  • user avatars.

For non-square elements, 50% creates an oval or pill-like shape.

Pill Buttons

A common modern button style is the pill button.

.button {
  border-radius: 999px;
}

Using a very large value like 999px makes the button fully rounded without needing to know its exact height.

Example:

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.25rem;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
}

Pill buttons work well for:

  • primary CTAs;

  • tags;

  • filters;

  • navigation pills;

  • badges;

  • app-style interfaces.

Border Radius for Cards

Cards usually look better with moderate radius values.

Example:

.card {
  border-radius: 16px;
}

For larger cards, you can use a larger radius:

.feature-card {
  border-radius: 24px;
}

For small compact cards, use a smaller radius:

.mini-card {
  border-radius: 10px;
}

A practical rule:

  • small card: 8px to 12px;

  • medium card: 16px to 20px;

  • large card: 24px to 32px.

The bigger the component, the more radius it can usually support.

Border Radius for Images

Images can also use rounded corners.

.image-card img {
  border-radius: 16px;
}

For large editorial images:

.hero-image {
  border-radius: 24px;
}

For avatars:

.avatar {
  border-radius: 50%;
}

When rounding images, make sure the image does not conflict with the shape of its container.

If the image sits inside a rounded card, the image and card radius should feel related.

Border Radius for Modals

Modals often benefit from larger, softer corners.

.modal {
  border-radius: 24px;
}

A modal is usually larger than a button or input, so a larger radius can feel natural.

For modern app-like modals:

.modal {
  border-radius: 28px;
}

For more formal interfaces, use a smaller value:

.modal {
  border-radius: 12px;
}

The right value depends on your brand style.

Border Radius for Inputs

Inputs usually need subtle radius.

.input {
  border-radius: 10px;
}

For a softer style:

.input {
  border-radius: 14px;
}

For pill-shaped search fields:

.search-input {
  border-radius: 999px;
}

Inputs should feel clickable and comfortable, but not too decorative. The border radius should not make the form look inconsistent.

Match Border Radius with Shadows

Border radius and box shadow should work together.

A very rounded card with a harsh shadow can look strange. A soft card should usually have a soft shadow.

Good example:

.card {
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

For a smaller radius, use a tighter shadow:

.card-small {
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

The shape and depth should feel like part of the same visual system.

Border Radius and Glassmorphism

Glassmorphism usually looks better with smooth, generous corners.

.glass-card {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

Because glass effects are soft and translucent, sharp corners can feel too rigid.

For glass cards, try:

border-radius: 20px;
border-radius: 24px;
border-radius: 32px;

Use larger values for bigger panels.

Border Radius and Neumorphism

Neumorphism also depends heavily on border radius.

A neumorphic card usually needs soft corners and soft shadows:

.neumorphic-card {
  border-radius: 24px;
  background: #e5e7eb;
  box-shadow:
    12px 12px 24px rgba(0, 0, 0, 0.12),
    -12px -12px 24px rgba(255, 255, 255, 0.75);
}

If the border radius is too small, the effect can feel hard or outdated. If it is too large, the component may feel too bubbly.

Balance matters.

Asymmetric Border Radius

You do not always need identical corners.

Asymmetric border radius can create more unique UI shapes.

Example:

.card {
  border-radius: 32px 12px 32px 12px;
}

This creates a more dynamic shape.

Another example:

.banner {
  border-radius: 32px 32px 8px 8px;
}

This can work well for:

  • hero cards;

  • decorative panels;

  • quote blocks;

  • image masks;

  • promotional banners;

  • creative UI sections.

Use asymmetric corners carefully. Too many different shapes can make the interface feel inconsistent.

Elliptical Border Radius

CSS also supports elliptical border radius using the slash syntax.

Example:

.shape {
  border-radius: 40px / 20px;
}

This means the horizontal and vertical radii are different.

You can create more organic curves:

.blob-card {
  border-radius: 40% 60% 55% 45% / 45% 35% 65% 55%;
}

This is useful for:

  • decorative blobs;

  • organic shapes;

  • hero backgrounds;

  • creative image masks;

  • playful UI elements.

For normal UI components, simple pixel values are usually easier to control.

How to Choose Border Radius Values

A good border radius system keeps the interface consistent.

Example system:

:root {
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;
}

Then use those values across your design:

.card {
  border-radius: var(--radius-lg);
}

.button {
  border-radius: var(--radius-full);
}

.input {
  border-radius: var(--radius-md);
}

This makes your UI easier to maintain.

Instead of random values everywhere, your design gets a consistent shape language.

Common Border Radius Mistakes

1. Using the Same Radius Everywhere

A tiny badge and a large modal do not always need the same radius.

Scale the radius with the component size.

2. Making Everything Too Rounded

Too much radius can make a design feel childish or inconsistent.

Pill buttons are fine, but not every card, modal and image needs to be fully rounded.

3. Mixing Too Many Radius Styles

If one card uses 4px, another uses 18px, another uses 37px and another uses 50%, the design can feel messy.

Use a small radius scale.

4. Ignoring the Shadow

Rounded cards usually need shadows that match their softness.

A soft radius with a harsh shadow can look disconnected.

5. Forgetting Overflow

If an image inside a rounded card does not respect the card radius, it may spill outside visually.

Use:

.card {
  border-radius: 24px;
  overflow: hidden;
}

This clips child content to the rounded shape.

Use this carefully if you have dropdowns or elements that need to overflow outside the card.

Practical Border Radius Recipes

Small UI Card

.card-small {
  border-radius: 12px;
}

Best for compact panels, widgets and small content blocks.

Modern Feature Card

.feature-card {
  border-radius: 24px;
}

Best for landing pages, tool cards and feature sections.

Pill Button

.button {
  border-radius: 999px;
}

Best for CTAs, filters, tags and navigation pills.

Rounded Image

.image {
  border-radius: 20px;
}

Best for blog images, portfolio images and product visuals.

Avatar Circle

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

Best for profile photos and user images.

Organic Blob Shape

.blob {
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
}

Best for decorative shapes and creative backgrounds.

Generate Border Radius CSS Online

You can write border radius manually, but visual tools make it easier to test different shapes.

With the free CSS Border Radius Generator by Free Utilities Online, you can:

  • adjust each corner;

  • create rounded cards;

  • generate pill shapes;

  • test asymmetric corners;

  • preview the result instantly;

  • copy ready-to-use CSS.

This is useful for cards, buttons, images, modals, inputs, blobs and creative UI shapes.

Related Free CSS Tools

You may also find these tools useful:

Together, these tools help you create smoother UI components with better shapes, shadows, backgrounds and visual depth.

FAQ

What does CSS border-radius do?

CSS border-radius rounds the corners of an element. You can use it on cards, buttons, images, inputs, modals and many other UI components.

How do I make a circle with border-radius?

Use border-radius: 50% on an element with equal width and height. This is commonly used for avatars and circular icons.

How do I make a pill button in CSS?

Use a very large radius such as border-radius: 999px. This makes the button fully rounded regardless of its width.

Can each corner have a different border radius?

Yes. You can provide four values to control the top-left, top-right, bottom-right and bottom-left corners individually.

What is a good border radius for cards?

A good starting point is between 12px and 24px, depending on the size and style of the card. Larger cards can usually support larger radius values.

Final Tip

CSS border radius is simple, but it works best when used consistently.

Create a small radius scale, match the radius to the component size and make sure shadows, images and backgrounds follow the same visual style.

Try the CSS Border Radius Generator to create smooth UI corners visually and copy clean CSS for your next design.

Related Posts

Scroll al inicio