• Home
  • Atoms
    • Color
    • Corners
    • Icons
    • Layout
    • Spacing
    • Typography
  • Molecules
    • Accordion
    • Badge
    • Breadcrumbs
    • Button
    • Card
    • Checkbox
    • Collapse
    • Data table
    • Data table simple
    • File input
    • Form message
    • Modal
    • Pagination
    • Popover
    • Progress
    • Progress circle
    • Radio button
    • Radio cards
    • Rating
    • Segmented control
    • Skeleton
    • Slider
    • Support
    • Tabs
    • Textarea
    • Text input
    • Tooltip
    • Verification code
    • Video
    • View more
  • Organisms
    • Carousel
    • CTA banner
    • CTA card
    • Error page
    • File preview modal
    • Form
    • Reviews.io card carousel
    • Support card
    • Zip code form
  • Examples
    • Form with client-side validation
    • Form with server error
    • Reordering with motion
  1. Home
  2. /
  3. Atoms
  4. /
  5. Corners

Corners

Below are the four corner radius sizes used throughout the design system. Each size lists a few examples of components that make use of that size. Use the utility classes listed below (e.g. rounded) to add the desired corner radius to your UI elements.

xs / 4px

rounded-xs

  • Used by 
  • Pagination
  • Textarea
  • Text input

sm / 8px

rounded-sm

  • Used by 
  • Form message
  • Popover
  • Tooltip
  • Verification code

md / 12px

rounded

  • Used by 
  • Badge
  • Button
  • Card
  • Data table

lg / 16px

rounded-lg

  • Used by 
  • Accordion
  • Modal