Blueprint

GuidesFoundationComponentsReleases
⌘K

Borders

System border tokens are available for the border-radius, border-width and border-color CSS properties. Border tokens can also be applied with presets that include all three properties preconfigured for specific use-cases.

Radius

2004px
45024px
50028px
55036px
300/small8px
350/medium12px
400/large16px
round/full999999px

Width

4001px
5002px

Presets

neutral
danger
primary
disabled
invalid

Focus Presets

focus
focusNeutral
focusWarning
focusDanger
focusSuccess

Usage

React

Individual border properties can be set with the corresponding style props of borderRadius, borderWidth, and borderColor. Border presets are applied via the border style prop.

Radius

live

function Radii() {
const Radius = props => (
<Panel as={Center} border="neutral" height="600" width="600" {...props}>
<Code fontWeight="bold" size={400}>
{props.borderRadius}
</Code>
</Panel>
);
return (
<Stack direction="row" spacing="400">
<Radius borderRadius="200" />
<Radius borderRadius="300" />
<Radius borderRadius="400" />
<Radius borderRadius="500" />
<Radius borderRadius="900" />
</Stack>
);
}

Width

live

function Widths() {
const Width = props => (
<Panel as={Center} border="neutral" height="600" width="600" {...props}>
<Code fontWeight="bold" size={400}>
{props.borderWidth}
</Code>
</Panel>
);
return (
<Stack direction="row" spacing="400">
<Width borderWidth="400" />
<Width borderWidth="500" />
</Stack>
);
}

Presets

live

function Presets() {
const Preset = props => (
<Panel as={Center} height="600" width="600" {...props}>
<Code size={400}>{props.border}</Code>
</Panel>
);
return (
<Stack direction="row" spacing="400">
<Preset border="neutral" />
<Preset border="danger" />
<Preset border="primary" />
<Preset border="disabled" />
<Preset border="invalid" />
</Stack>
);
}

Focus Presets

live

function FocusPresets() {
const FocusPreset = props => (
<Panel as={Center} height="600" width="600" {...props}>
<Code size={400}>{props.border}</Code>
</Panel>
);
return (
<Stack direction="row" spacing="400">
<FocusPreset border="focus" />
<FocusPreset border="focusNeutral" />
<FocusPreset border="focusWarning" />
<FocusPreset border="focusDanger" />
<FocusPreset border="focusSuccess" />
</Stack>
);
}