Styled SystemBorder Radius

Border Radius

Use rounded prop to control the border radius of an element.

Name

Value

Pixels

 

xs

0.125rem

2px

sm

0.25rem

4px

md

0.375rem

6px

lg

0.5rem

8px

xl

0.75rem

12px

full

9999px

9999px

none

0

0

Documentation

Usage

rounded=sm

rounded=md

rounded=lg

rounded=full

import { Box } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Box rounded="sm">rounded=sm</Box>
      <Box rounded="md">rounded=md</Box>
      <Box rounded="lg">rounded=lg</Box>
      <Box rounded="full">rounded=full</Box>
    </Canvas>
  );
}

Copyright 2024 © Optimizely.