Border Radius

Border radius rounds the corners of an element's border. It can be applied equally to all corners or individually, creating everything from subtle rounded edges to circles.

Border Radius Syntax

CSS

/* Single value: all corners */
.element {
  border-radius: 8px;
}

/* Two values: top-left/bottom-right, top-right/bottom-left */
.element {
  border-radius: 8px 16px;
}

/* Four values: top-left, top-right, bottom-right, bottom-left */
.element {
  border-radius: 8px 12px 16px 4px;
}

/* Individual corners */
.element {
  border-top-left-radius: 8px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 4px;
}

/* Percentage values */
.element {
  border-radius: 50%;
  /* Creates a circle if width and height are equal */
}

Common Patterns

CSS

/* Subtle rounded corners */
.card {
  border-radius: 4px;
}

/* Medium rounded corners */
.button {
  border-radius: 8px;
}

/* Large rounded corners */
.container {
  border-radius: 16px;
}

/* Circle */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Pill-shaped button */
button {
  padding: 12px 24px;
  border-radius: 20px;
}

Note

Border radius rounds corners. Use small values for subtle effects, larger values for pronounced rounding, and 50% to create circles.

Z-index and stacking: [z-index](/css/z-index).