Skip to main content
Version: Next

Border Radius

Border Radius

Utilities for controlling the radius of an element's borders.

NamespaceOutput
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");