Our border radius styles are mainly categorized by Element type and Size.
Text-based inputs border radius
Border Radius / container / sm
border_radius
The recommended small border-radius for containers. Eg in-line alert
Border Radius / container / md
border_radius
The recommended medium border-radius for containers. Eg cards
Border Radius / container / full
border_radius
The recomended border radius for circle-shaped containers.
Border Radius / container / lg
border_radius
The recommended large border-radius for large containers, like modals.
Border Radius / interactive / sm
border_radius
The recommended small border-radius for interactive component. Eg Buttons
Border Radius / interactive / xl
border_radius
The recommended xlarge border-radius for interactive component. Eg handle of the slider
Border Radius / interactive / lg
border_radius
The recommended large border-radius for interactive component. Eg Tags
Border Radius / form_control / text_input / md
border_radius
The recommended medium border-radius for inputs
Border Radius / form_control / text_input / sm
border_radius
The recommended small border-radius for inputs
Border Radius / form_control / text_input / lg
border_radius
The recommended large border-radius for inputs
Border Radius / focus_outline / xl
border_radius
The recommended xlarge border-radius for focus. Eg toggle
Border Radius / focus_outline / lg
border_radius
The recommended large border-radius for focus. Eg segmented control
Border Radius / focus_outline / sm
border_radius
The recommended small border-radius for focus. Eg input control
Border Radius / focus_outline / full
border_radius
The recommended full border-radius for focus. Eg avatar
Border Radius / focus_outline / md
border_radius
The recommended medium border-radius for focus. Eg check box
Border Radius / focus_outline / xs
border_radius
The recommended xsmall border-radius for focus. Eg icons