Grapes homepage1.44.0

    Border Radius

    Tokens

    --border-radius-4
    --border-radius-8
    --border-radius-12

    Usage in CSS

    Whenever you want to apply this style, you can use the corresponding variable.

    .myClass {
  border-radius: var(--border-radius-8);
}

    Usage with TailwindCSS

    Whenever you want to use a border radius from Grapes with TailwindCSS, you can use the corresponding keys.

    Example with border-radius:

    TailwindCSS classNameCSS equivalent
    rounded-4
    border-radius: var(--border-radius-4)
    rounded-8
    border-radius: var(--border-radius-8)
    rounded-12
    border-radius: var(--border-radius-12)

    See documentation from TailwindCSS: https://tailwindcss.com/docs/border-radius