Border-radius

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Usage

<div class="rounded"></div>

.rounded {
  border-radius: 0.25rem;
}
.rounded-8 {
  border-radius: 0.5rem;
}
.rounded-10 {
  border-radius: 0.625rem;
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-8 {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-t-10 {
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
}

.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-r-8 {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.3125rem;
}
.rounded-r-10 {
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}

.rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-b-8 {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-b-10 {
  border-bottom-right-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
}

.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-l-8 {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-l-10 {
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
}

.rounded-full {
  border-radius: 9999px;
}
.circle {
  border-radius: 100%;
}
.rounded-0 {
  border-radius: 0;
}