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. |
| 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. |
| 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. |
| Variable | Value | |
|---|---|---|
--border-radius-circular
|
50% | Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. |
Best Practice
Tips to keep in mind while using border radius:
Do
Use medium corner radius on large elements.
Don't
Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious.