Border Radius
Border Radius
Utilities for controlling the radius of an element's borders.
| Namespace | Output |
|---|---|
| rounded-none | { borderRadius: 0 } |
| rounded-sm | { borderRadius: 2 } |
| rounded | { borderRadius: 4 } |
| rounded-md | { borderRadius: 6 } |
| rounded-lg | { borderRadius: 8 } |
| rounded-full | { borderRadius: 9999 } |
| rounded-t-none | { borderTopLeftRadius: 0, borderTopRightRadius: 0 } |
| rounded-r-none | { borderTopRightRadius: 0, borderBottomRightRadius: 0 } |
| rounded-b-none | { borderBottomRightRadius: 0, borderBottomLeftRadius: 0 } |
| rounded-l-none | { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } |
| rounded-t-sm | { borderTopLeftRadius: 2, borderTopRightRadius: 2 } |
| rounded-r-sm | { borderTopRightRadius: 2, borderBottomRightRadius: 2 } |
| rounded-b-sm | { borderBottomRightRadius: 2, borderBottomLeftRadius: 2 } |
| rounded-l-sm | { borderTopLeftRadius: 2, borderBottomLeftRadius: 2 } |
| rounded-t | { borderTopLeftRadius: 4, borderTopRightRadius: 4 } |
| rounded-r | { borderTopRightRadius: 4, borderBottomRightRadius: 4 } |
| rounded-b | { borderBottomRightRadius: 4, borderBottomLeftRadius: 4 } |
| rounded-l | { borderTopLeftRadius: 4, borderBottomLeftRadius: 4 } |
| rounded-t-md | { borderTopLeftRadius: 6, borderTopRightRadius: 6 } |
| rounded-r-md | { borderTopRightRadius: 6, borderBottomRightRadius: 6 } |
| rounded-b-md | { borderBottomRightRadius: 6, borderBottomLeftRadius: 6 } |
| rounded-l-md | { borderTopLeftRadius: 6, borderBottomLeftRadius: 6 } |
| rounded-t-lg | { borderTopLeftRadius: 8, borderTopRightRadius: 8 } |
| rounded-r-lg | { borderTopRightRadius: 8, borderBottomRightRadius: 8 } |
| rounded-b-lg | { borderBottomRightRadius: 8, borderBottomLeftRadius: 8 } |
| rounded-l-lg | { borderTopLeftRadius: 8, borderBottomLeftRadius: 8 } |
| rounded-t-full | { borderTopLeftRadius: 9999, borderTopRightRadius: 9999 } |
| rounded-r-full | { borderTopRightRadius: 9999, borderBottomRightRadius: 9999 } |
| rounded-b-full | { borderBottomRightRadius: 9999, borderBottomLeftRadius: 9999 } |
| rounded-l-full | { borderTopLeftRadius: 9999, borderBottomLeftRadius: 9999 } |
| rounded-tl-none | { borderTopLeftRadius: 0 } |
| rounded-tr-none | { borderTopRightRadius: 0 } |
| rounded-br-none | { borderBottomRightRadius: 0 } |
| rounded-bl-none | { borderBottomLeftRadius: 0 } |
| rounded-tl-sm | { borderTopLeftRadius: 2 } |
| rounded-tr-sm | { borderTopRightRadius: 2 } |
| rounded-br-sm | { borderBottomRightRadius: 2 } |
| rounded-bl-sm | { borderBottomLeftRadius: 2 } |
| rounded-tl | { borderTopLeftRadius: 4 } |
| rounded-tr | { borderTopRightRadius: 4 } |
| rounded-br | { borderBottomRightRadius: 4 } |
| rounded-bl | { borderBottomLeftRadius: 4 } |
| rounded-tl-md | { borderTopLeftRadius: 6 } |
| rounded-tr-md | { borderTopRightRadius: 6 } |
| rounded-br-md | { borderBottomRightRadius: 6 } |
| rounded-bl-md | { borderBottomLeftRadius: 6 } |
| rounded-tl-lg | { borderTopLeftRadius: 8 } |
| rounded-tr-lg | { borderTopRightRadius: 8 } |
| rounded-br-lg | { borderBottomRightRadius: 8 } |
| rounded-bl-lg | { borderBottomLeftRadius: 8 } |
| rounded-tl-full | { borderTopLeftRadius: 9999 } |
| rounded-tr-full | { borderTopRightRadius: 9999 } |
| rounded-br-full | { borderBottomRightRadius: 9999 } |
| rounded-bl-full | { borderBottomLeftRadius: 9999 } |
Custom Border Radius
If you didn't get suitable border radius for your project app, you can define your font size by adding in CustomTheme.js file:
export default {
border: {
radius: {
"super-xl": 120
}
}
}