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.

VariableRems
--rbrh-radius-xs0.25rem
--rbrh-radius-sm0.5rem
--rbrh-radius-md0.75rem
--rbrh-radius-lg1rem
--rbrh-radius-xl1.25rem
--rbrh-radius-circle100rem

Usage

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

Customizing

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;
tip

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