Border radius
Read all border variablesDefault 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.
Variable | Rems |
---|---|
--rbrh-radius-xs | 0.25rem |
--rbrh-radius-sm | 0.5rem |
--rbrh-radius-md | 0.75rem |
--rbrh-radius-lg | 1rem |
--rbrh-radius-xl | 1.25rem |
--rbrh-radius-circle | 100rem |
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