Skip to main content
Version: 0.6

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-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
}
}
}