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

Borders

Borders are always solid with a default border color. You can control the position, radius, and color of borders.

Border position

Border radius

Border color

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

Component props

NameValue
borderResponsive<boolean>
borderRadiusResponsive<"1" | "2" | "3" | "4" | "full">
borderColorResponsive<BorderColor>
Shadows
Breakpoints
On this pageBorder positionBorder radiusBorder colorCSS variablesComponent props