zendocs
Getting StartedIntroductionInstallation
DesignColorsFontsSpacingShadowsBordersBreakpoints
TypographyTextHeadingBlockquoteCode
LayoutsBoxFlexboxGridContainer
ComponentsAccordionAlert BannerAlert DialogButtonBreadcrumbsCalendarCheckboxComboboxConfirmation DialogData TableDialogDotsFormHover TriggerIconIconsImageInline Edit FieldListLoading ButtonMenuModalNagivation BarPassword FieldPopoverProgress BarProgress CircleRadio GroupSearch FieldSelectSide NavigationSliderSpinnerStatus LightSwitchTableTabsText FieldTheme ButtonToastToggleToggle GroupTooltip
Design

Borders

Borders are always solid and a fixed color. You can control the radius and size of borders.

Border radius

Border size

CSS variables

Border radius values are defined as a 5-step scale from smallest to largest.

NameValue
--border-radius-12px
--border-radius-24px
--border-radius-38px
--border-radius-416px
--border-radius-full9999px

Border sizes are defined as a 4-step scale from smallest to largest.

NameValue
--border-size-11px
--border-size-22px
--border-size-34px
--border-size-48px

Component props

NameValue
borderRadiusResponsive<"1" | "2" | "3" | "4" | "full">
borderSizeResponsive<"1" | "2" | "3" | "4">
Shadows
Breakpoints
On this pageBorder radiusBorder sizeCSS variablesComponent props