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
0pxr-1
2pxr-2
4pxr-3
6pxr-4
8pxr-5
12pxr-6
20pxr-full
9999pxSCSS 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