Skip to main content

Border radius

Read all border variables

Default border radius scale

Ravenbright border radius variable is defined globally and begin with the prefix --rbrh-radius-{size}. This variable can be used and customized on various components.



To use the border-radius, you can place the CSS variables inside component selector.

.card {
/*Use the border radius variables*/
border-radius: var(--rbrh-radius-sm);


To modify the border-radius value, you can edit these variables in CSS-variables:

/* Border radius */
--rbrh-radius-circle: 100rem;
--rbrh-radius-xl: 1.25rem;
--rbrh-radius-lg: 1rem;
--rbrh-radius-md: .75rem;
--rbrh-radius-sm: .5rem;
--rbrh-radius-xs: .25rem;

Checkout the complete tutorial on how to customize & add new design variable in CSS variables