:root {
  --border-width: 1px;
  --border-color: #eee;
  --border-radius: 8px;
  --br: 2px;
}

.square {
  border-radius: 0;
}

.circle {
  border-radius: 50%;
}

.pill {
  border-radius: 999px;
}

.rounded {
  border-radius: var(--br);
}
.rounded2 {
  border-radius: calc(var(--br) * 2);
}
.rounded3 {
  border-radius: calc(var(--br) * 3);
}
.rounded4 {
  border-radius: calc(var(--br) * 4);
}

.roundedTop {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.roundedTop2 {
  border-radius: calc(var(--br) * 2) calc(var(--br) * 2) 0 0;
}
.roundedTop3 {
  border-radius: calc(var(--br) * 3) calc(var(--br) * 3) 0 0;
}
.roundedTop4 {
  border-radius: calc(var(--br) * 4) calc(var(--br) * 4) 0 0;
}

.roundedRight {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.roundedRight2 {
  border-radius: 0 calc(var(--br) * 2) calc(var(--br) * 2) 0;
}
.roundedRight3 {
  border-radius: 0 calc(var(--br) * 3) calc(var(--br) * 3) 0;
}
.roundedRight4 {
  border-radius: 0 calc(var(--br) * 4) calc(var(--br) * 4) 0;
}

.roundedBottom {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.roundedBottom2 {
  border-radius: 0 0 calc(var(--br) * 2) calc(var(--br) * 2);
}
.roundedBottom3 {
  border-radius: 0 0 calc(var(--br) * 3) calc(var(--br) * 3);
}
.roundedBottom4 {
  border-radius: 0 0 calc(var(--br) * 4) calc(var(--br) * 4);
}

.roundedLeft {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.roundedLeft2 {
  border-radius: calc(var(--br) * 2) 0 0 calc(var(--br) * 2);
}
.roundedLeft3 {
  border-radius: calc(var(--br) * 3) 0 0 calc(var(--br) * 3);
}
.roundedLeft4 {
  border-radius: calc(var(--br) * 4) 0 0 calc(var(--br) * 4);
}