Tag border-radius

🔵 CSS border-radius: Crafting Smooth, Rounded Corners

The era of sharp-edged design is long gone. In modern web design, rounded corners give elements a friendly, soft, and polished appearance. The CSS border-radius property is what makes this possible — it allows you to round the corners of any HTML element with ease.

🧾 What is border-radius?

The border-radius property defines the curvature of the corners of an element’s box. It can be applied uniformly or individually to each corner for unique shapes and designs.

🧬 Syntax

/* Shorthand */
selector {
  border-radius: <radius>;
}

/* Individual corners */
selector {
  border-top-left-radius: <radius>;
  border-top-right-radius: <radius>;
  border-bottom-right-radius: <radius>;
  border-bottom-left-radius: <radius>;
}

Accepted Units:

  • Pixels (px)
  • Percentages (%)
  • Em/rem/viewport units (advanced usage)

🧪 Value Patterns

Value CountInterpretation
1 valueAll corners get the same radius.
2 valuesTop-left & bottom-right = first, top-right & bottom-left = second.
3–4 valuesValues are applied to corners in a clockwise order: top-left, top-right, bottom-right, bottom-left.

🎯 Examples

1. Uniform rounded corners

.card {
  border-radius: 12px;
}

All four corners get a 12px radius — soft and consistent.

2. Different radii per corner

.box {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 50px;
}

A custom asymmetrical look with selective curvature.

3. Circle or ellipse shape

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

A square element becomes a perfect circle with border-radius: 50%.

4. Complex shapes using slash syntax

div {
  border-radius: 50px 20px / 30px 10px;
}

Creates elliptical corners with horizontal and vertical radii.

🎨 Practical Uses

  • Buttons: Soften the look of CTA buttons.
  • Cards: Add modern flair to UI panels or product tiles.
  • Images: Display profile pictures in circles.
  • Containers: Create speech bubbles or tags with asymmetric corners.

🛠️ Best Practices

  • Use percentages for dynamic, responsive rounding (e.g., 50% for circles).
  • Combine with overflow: hidden to clip inner content, especially for images.
  • Don’t overuse rounded corners — stick to a consistent radius scale for brand cohesion.
  • When used on elements with borders, test how it looks on different screen sizes.

✅ Browser Support

border-radius is supported in all modern browsers, including:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 9+

🔚 Conclusion

The CSS border-radius property is a versatile and essential tool in every web designer’s toolkit. Whether you’re crafting circular avatars, pill-shaped buttons, or soft panels, border-radius helps give your UI a modern, approachable feel.