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-xl | { borderTopLeftRadius: 10, borderTopRightRadius: 10 } |
| rounded-r-xl | { borderTopRightRadius: 10, borderBottomRightRadius: 10 } |
| rounded-b-xl | { borderBottomRightRadius: 10, borderBottomLeftRadius: 10 } |
| rounded-l-xl | { borderTopLeftRadius: 10, borderBottomLeftRadius: 10 } |
| rounded-t-2xl | { borderTopLeftRadius: 12, borderTopRightRadius: 12 } |
| rounded-r-2xl | { borderTopRightRadius: 12, borderBottomRightRadius: 12 } |
| rounded-b-2xl | { borderBottomRightRadius: 12, borderBottomLeftRadius: 12 } |
| rounded-l-2xl | { borderTopLeftRadius: 12, borderBottomLeftRadius: 12 } |
| 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-xl | { borderTopLeftRadius: 10 } |
| rounded-tr-xl | { borderTopRightRadius: 10 } |
| rounded-br-xl | { borderBottomRightRadius: 10 } |
| rounded-bl-xl | { borderBottomLeftRadius: 10 } |
| rounded-tl-2xl | { borderTopLeftRadius: 12 } |
| rounded-tr-2xl | { borderTopRightRadius: 12 } |
| rounded-br-2xl | { borderBottomRightRadius: 12 } |
| rounded-bl-2xl | { borderBottomLeftRadius: 12 } |
| 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.
Create Pre-defined
You can define your font size by adding in osmi.config.js file:
export default {
border: {
radius: {
"super-xl": 120,
},
},
};
Usage
apply("rounded-super-xl");