Border Radius

Utility classes to round the corners of elements.

Basic Usage

Apply radius classes directly to HTML elements:

HTML
<div class="r-0">반경 없음</div>
<div class="r-2">반경 4px</div>
<div class="r-4">반경 8px</div>
<div class="r-full">완전히 둥글게</div>

All Radius Values

All available border radius values:

Radius Scale:
r-0
0px
r-1
2px
r-2
4px
r-3
6px
r-4
8px
r-5
12px
r-6
20px
r-full
9999px

SCSS Usage

Use the r() function in SCSS modules to apply border radius:

component.module.scss
@use 'podo-ui/mixin' as *;

.button {
  border-radius: r(2);  // 4px
}

.card {
  border-radius: r(4);  // 8px
}

.modal {
  border-radius: r(5);  // 12px
}

.avatar {
  border-radius: r(full);  // 완전히 둥글게
  width: 40px;
  height: 40px;
}

.badge {
  border-radius: r(6);  // 20px
  padding: s(2) s(4);
}

Real World Examples

Practical UI component examples using various border radius values:

Button Examples:
Card Examples:

r-3 Card

A card with 6px border radius.

r-5 Card

A card with 12px border radius.

Avatar Examples:
A
B