Border Radius

Different sizes of border radius are used throughout the Appwrite UI according to the component size.

Sizes

In Appwrite console we use 4 sizes of border radius:

Variable	Value
`--border-radius-xsmall`	4px	Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips.

--border-radius-xsmall


      <div class="card" style="border-radius: var(--border-radius-xsmall);"></div>

Variable	Value
`--border-radius-small`	8px	Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers.

--border-radius-small


      <div class="card" style="border-radius: var(--border-radius-small);"></div>

Variable	Value
`--border-radius-medium`	16px	Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables.

--border-radius-medium


      <div class="card" style="border-radius: var(--border-radius-medium);"></div>

Variable	Value
`--border-radius-circular`	50%	Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches.

--border-radius-circular


      <div class="card" style="border-radius: var(--border-radius-circular);"></div>

Tips to keep in mind while using border radius:

Use medium corner radius on large elements.

Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious.