border-radius
border-radius 속성에 대한 유틸리티입니다.
요소의 테두리의 둥글기를 설정합니다.
기본 테두리 둥글기 var(--border-radius) 설정과 관련된 내용은 여기를 참고해주세요.
| 클래스 | 약어 클래스 | 속성 |
|---|---|---|
border-radius:0 | bd-radius:0 | border-radius: var(--border-radius-0) !important; /* 0px */ |
border-radius:1 | bd-radius:1 | border-radius: var(--border-radius-1) !important; /* 4px */ |
border-radius:2 | bd-radius:2 | border-radius: var(--border-radius-2) !important; /* 8px */ |
border-radius:3 | bd-radius:3 | border-radius: var(--border-radius-3) !important; /* 12px */ |
border-radius:4 | bd-radius:4 | border-radius: var(--border-radius-4) !important; /* 16px */ |
border-radius:full | bd-radius:full | border-radius: var(--border-radius-full) !important; /* 9999px */ |
border-top-left-radius:0 | bd-tl-radius:0 | border-top-left-radius: var(--border-radius-0) !important; /* 0px */ |
border-top-left-radius:1 | bd-tl-radius:1 | border-top-left-radius: var(--border-radius-1) !important; /* 4px */ |
border-top-left-radius:2 | bd-tl-radius:2 | border-top-left-radius: var(--border-radius-2) !important; /* 8px */ |
border-top-left-radius:3 | bd-tl-radius:3 | border-top-left-radius: var(--border-radius-3) !important; /* 12px */ |
border-top-left-radius:4 | bd-tl-radius:4 | border-top-left-radius: var(--border-radius-4) !important; /* 16px */ |
border-top-left-radius:full | bd-tl-radius:full | border-top-left-radius: var(--border-radius-full) !important; /* 9999px */ |
border-top-right-radius:0 | bd-tr-radius:0 | border-top-right-radius: var(--border-radius-0) !important; /* 0px */ |
border-top-right-radius:1 | bd-tr-radius:1 | border-top-right-radius: var(--border-radius-1) !important; /* 4px */ |
border-top-right-radius:2 | bd-tr-radius:2 | border-top-right-radius: var(--border-radius-2) !important; /* 8px */ |
border-top-right-radius:3 | bd-tr-radius:3 | border-top-right-radius: var(--border-radius-3) !important; /* 12px */ |
border-top-right-radius:4 | bd-tr-radius:4 | border-top-right-radius: var(--border-radius-4) !important; /* 16px */ |
border-top-right-radius:full | bd-tr-radius:full | border-top-right-radius: var(--border-radius-full) !important; /* 9999px */ |
border-bottom-right-radius:0 | bd-br-radius:0 | border-bottom-right-radius: var(--border-radius-0) !important; /* 0px */ |
border-bottom-right-radius:1 | bd-br-radius:1 | border-bottom-right-radius: var(--border-radius-1) !important; /* 4px */ |
border-bottom-right-radius:2 | bd-br-radius:2 | border-bottom-right-radius: var(--border-radius-2) !important; /* 8px */ |
border-bottom-right-radius:3 | bd-br-radius:3 | border-bottom-right-radius: var(--border-radius-3) !important; /* 12px */ |
border-bottom-right-radius:4 | bd-br-radius:4 | border-bottom-right-radius: var(--border-radius-4) !important; /* 16px */ |
border-bottom-right-radius:full | bd-br-radius:full | border-bottom-right-radius: var(--border-radius-full) !important; /* 9999px */ |
border-bottom-left-radius:0 | bd-bl-radius:0 | border-bottom-left-radius: var(--border-radius-0) !important; /* 0px */ |
border-bottom-left-radius:1 | bd-bl-radius:1 | border-bottom-left-radius: var(--border-radius-1) !important; /* 4px */ |
border-bottom-left-radius:2 | bd-bl-radius:2 | border-bottom-left-radius: var(--border-radius-2) !important; /* 8px */ |
border-bottom-left-radius:3 | bd-bl-radius:3 | border-bottom-left-radius: var(--border-radius-3) !important; /* 12px */ |
border-bottom-left-radius:4 | bd-bl-radius:4 | border-bottom-left-radius: var(--border-radius-4) !important; /* 16px */ |
border-bottom-left-radius:full | bd-bl-radius:full | border-bottom-left-radius: var(--border-radius-full) !important; /* 9999px */ |