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>
  );
}

Blueprint

Settings

Borders

Radius

Width

Presets

Focus Presets

Usage

React

Radius

Width

Presets

Focus Presets