Styled SystemBorder Width

Border Width

Use border prop to control the border width of an element.

Name

Value

 

0

0

1

1px

2

2px

4

4px

Documentation

Usage

border=1

border=2

border=4

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box border="1">border=1</Box>
      <Box border="2">border=2</Box>
      <Box border="4">border=4</Box>
    </Canvas>
  );
}

Single side

borderT=4

borderR=4

borderB=4

borderL=4

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box borderT="4">borderT=4</Box>
      <Box borderR="4">borderR=4</Box>
      <Box borderB="4">borderB=4</Box>
      <Box borderL="4">borderL=4</Box>
    </Canvas>
  );
}

Copyright 2024 © Optimizely.