UCSSR
CSS Reference

CSS border-radius

Complete guide to the CSS border-radius property — syntax, values, per-corner control, elliptical corners, and browser support.

On this page

Overview

The border-radius property rounds the corners of an element's outer border edge. It is a shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Introduced in CSS3, it is now universally supported and fundamental to modern web design — from subtle card rounding to perfect circles and organic blob shapes.

Syntax

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

Values & Keywords

0
No rounding (square corners). This is the default value.
<length>
Fixed radius in px, em, rem, etc. Example: border-radius: 8px.
<percentage>
Radius relative to the element's dimensions. 50% on a square creates a circle.
Two values
border-radius: 10px 20px — sets top-left/bottom-right and top-right/bottom-left.
Four values
border-radius: 10px 20px 30px 40px — each corner individually (TL, TR, BR, BL).
/ separator
border-radius: 50% / 25% — sets horizontal / vertical radii for elliptical corners.

Practical Examples

Button
Pill-shaped button
Using a very large value like 9999px ensures the ends are fully rounded regardless of the element height — safer than 50% which can distort on non-square elements.
.pill-button {
  padding: 0.5em 1.5em;
  border-radius: 9999px;
  background: #3b82f6;
  color: white;
}
Perfect circle avatar
Set border-radius: 50% on a square element (equal width and height). The overflow: hidden clips the child image to the circle.
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
iOS-style squircle
Asymmetric radii on each corner create an organic, rounded-rectangle shape reminiscent of iOS app icons.
.squircle {
  width: 120px;
  height: 120px;
  border-radius: 28% 72% 72% 28% / 28% 28% 72% 72%;
  background: linear-gradient(135deg, #667eea, #764ba2);
}
Hey there!
Hi! How are you?
Chat bubble with tail
Round three corners and leave one square to create a speech bubble shape. Combine with a pseudo-element for the tail.
.chat-bubble {
  padding: 12px 16px;
  background: #e5e7eb;
  border-radius: 16px 16px 16px 4px;
}

.chat-bubble.sent {
  background: #3b82f6;
  color: white;
  border-radius: 16px 16px 4px 16px;
}

Try it visually

Use our interactive border-radius generator to experiment with values and see the result in real-time. Copy production-ready CSS, cross-browser CSS, or Tailwind classes with one click.

Open CSS border-radius Tool

Common Patterns

Design system radius tokens
Define a consistent set of radius values as CSS custom properties. Reference these everywhere instead of hard-coding pixel values.
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

.card { border-radius: var(--radius-lg); }
.button { border-radius: var(--radius-md); }
.badge { border-radius: var(--radius-full); }
Responsive border-radius
Use clamp() to scale border-radius with the viewport — smaller on mobile, larger on desktop.
.card {
  border-radius: clamp(8px, 2vw, 24px);
  padding: clamp(16px, 3vw, 32px);
}
Notched corner
Combine a zero radius on one corner with large radii on others for a distinctive "notched" card design.
.notched-card {
  border-radius: 16px 16px 16px 0;
  border: 1px solid #e5e7eb;
  padding: 24px;
}

Tips & Best Practices

  1. 1

    Use 9999px instead of 50% for pill shapes — 50% can create unwanted ellipses on non-square elements, while a large fixed value always creates fully rounded ends.

  2. 2

    Define border-radius values as CSS custom properties (--radius-sm, --radius-md, --radius-lg) for consistent rounding across your entire design system.

  3. 3

    Add overflow: hidden to clipped containers — border-radius rounds the border, but child content can still overflow the visual boundary without it.

  4. 4

    Combine border-radius with outline-offset for rounded focus indicators that follow the element shape.

  5. 5

    When using border-radius with border-image, note that border-image takes precedence and will override border-radius clipping in most browsers.

Browser Support

Supported in all modern browsers. No vendor prefix needed since IE9+.

Related CSS Guides

box-shadow

CSS box-shadow

Complete guide to the CSS box-shadow property — syntax, multiple layers, inset shadows, spread radius, and performance tips.

button CSS

CSS Button Styles

Complete guide to styling CSS buttons — backgrounds, borders, hover effects, transitions, focus states, and accessibility.

CSS border-radius — FAQ

Common questions about border-radius and how to use it effectively.

How do I make a circle with border-radius?

Set border-radius: 50% on a square element (equal width and height). The radius rounds each corner by half the dimension, creating a perfect circle. For non-square elements, 50% creates an ellipse instead.

What is the difference between px and % for border-radius?

Pixel values create fixed-size rounding that doesn't change with the element size. Percentage values are relative to the element's dimensions — they scale as the element resizes. Use % for responsive designs, px for consistent rounding.

Can I round just one corner?

Yes. Use individual properties like border-top-left-radius: 20px or the shorthand with four values where only one is non-zero: border-radius: 20px 0 0 0 (rounds only the top-left corner).

Why does border-radius: 50% look different on rectangles?

On a rectangle, 50% refers to 50% of the width for horizontal radii and 50% of the height for vertical radii. Since these differ, you get an ellipse. Use a fixed pixel value or 9999px for consistent rounding.

Does border-radius affect the click/tap area?

No. The clickable area remains the full rectangular bounding box regardless of border-radius. If you need the hit area to match the visual shape, use clip-path instead — though this affects the element's overflow and layout.