Border Radius
| Class | Properties |
|---|---|
| gl-rounded-6 | border-radius: 1.5rem; /* 24px */ |
| gl-rounded-none | border-radius: 0; |
| gl-rounded-base | border-radius: .25rem; /* 4px */ |
| gl-rounded-full | border-radius: 50%; |
| gl-rounded-small | border-radius: .125rem; /* 2px */ |
| gl-rounded-lg | border-radius: .5rem; /* 8px */ |
| gl-rounded-pill | border-radius: .75rem; /* 12px */ |
| gl-rounded-s-6 | border-start-start-radius: 1.5rem; /* 24px */ border-end-start-radius: 1.5rem; /* 24px */ |
| gl-rounded-s-none | border-start-start-radius: 0; border-end-start-radius: 0; |
| gl-rounded-s-base | border-start-start-radius: .25rem; /* 4px */ border-end-start-radius: .25rem; /* 4px */ |
| gl-rounded-s-full | border-start-start-radius: 50%; border-end-start-radius: 50%; |
| gl-rounded-s-small | border-start-start-radius: .125rem; /* 2px */ border-end-start-radius: .125rem; /* 2px */ |
| gl-rounded-s-lg | border-start-start-radius: .5rem; /* 8px */ border-end-start-radius: .5rem; /* 8px */ |
| gl-rounded-s-pill | border-start-start-radius: .75rem; /* 12px */ border-end-start-radius: .75rem; /* 12px */ |
| gl-rounded-e-6 | border-start-end-radius: 1.5rem; /* 24px */ border-end-end-radius: 1.5rem; /* 24px */ |
| gl-rounded-e-none | border-start-end-radius: 0; border-end-end-radius: 0; |
| gl-rounded-e-base | border-start-end-radius: .25rem; /* 4px */ border-end-end-radius: .25rem; /* 4px */ |
| gl-rounded-e-full | border-start-end-radius: 50%; border-end-end-radius: 50%; |
| gl-rounded-e-small | border-start-end-radius: .125rem; /* 2px */ border-end-end-radius: .125rem; /* 2px */ |
| gl-rounded-e-lg | border-start-end-radius: .5rem; /* 8px */ border-end-end-radius: .5rem; /* 8px */ |
| gl-rounded-e-pill | border-start-end-radius: .75rem; /* 12px */ border-end-end-radius: .75rem; /* 12px */ |
| gl-rounded-t-6 | border-top-left-radius: 1.5rem; /* 24px */ border-top-right-radius: 1.5rem; /* 24px */ |
| gl-rounded-t-none | border-top-left-radius: 0; border-top-right-radius: 0; |
| gl-rounded-t-base | border-top-left-radius: .25rem; /* 4px */ border-top-right-radius: .25rem; /* 4px */ |
| gl-rounded-t-full | border-top-left-radius: 50%; border-top-right-radius: 50%; |
| gl-rounded-t-small | border-top-left-radius: .125rem; /* 2px */ border-top-right-radius: .125rem; /* 2px */ |
| gl-rounded-t-lg | border-top-left-radius: .5rem; /* 8px */ border-top-right-radius: .5rem; /* 8px */ |
| gl-rounded-t-pill | border-top-left-radius: .75rem; /* 12px */ border-top-right-radius: .75rem; /* 12px */ |
| gl-rounded-r-6 | border-top-right-radius: 1.5rem; /* 24px */ border-bottom-right-radius: 1.5rem; /* 24px */ |
| gl-rounded-r-none | border-top-right-radius: 0; border-bottom-right-radius: 0; |
| gl-rounded-r-base | border-top-right-radius: .25rem; /* 4px */ border-bottom-right-radius: .25rem; /* 4px */ |
| gl-rounded-r-full | border-top-right-radius: 50%; border-bottom-right-radius: 50%; |
| gl-rounded-r-small | border-top-right-radius: .125rem; /* 2px */ border-bottom-right-radius: .125rem; /* 2px */ |
| gl-rounded-r-lg | border-top-right-radius: .5rem; /* 8px */ border-bottom-right-radius: .5rem; /* 8px */ |
| gl-rounded-r-pill | border-top-right-radius: .75rem; /* 12px */ border-bottom-right-radius: .75rem; /* 12px */ |
| gl-rounded-b-6 | border-bottom-right-radius: 1.5rem; /* 24px */ border-bottom-left-radius: 1.5rem; /* 24px */ |
| gl-rounded-b-none | border-bottom-right-radius: 0; border-bottom-left-radius: 0; |
| gl-rounded-b-base | border-bottom-right-radius: .25rem; /* 4px */ border-bottom-left-radius: .25rem; /* 4px */ |
| gl-rounded-b-full | border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; |
| gl-rounded-b-small | border-bottom-right-radius: .125rem; /* 2px */ border-bottom-left-radius: .125rem; /* 2px */ |
| gl-rounded-b-lg | border-bottom-right-radius: .5rem; /* 8px */ border-bottom-left-radius: .5rem; /* 8px */ |
| gl-rounded-b-pill | border-bottom-right-radius: .75rem; /* 12px */ border-bottom-left-radius: .75rem; /* 12px */ |
| gl-rounded-l-6 | border-top-left-radius: 1.5rem; /* 24px */ border-bottom-left-radius: 1.5rem; /* 24px */ |
| gl-rounded-l-none | border-top-left-radius: 0; border-bottom-left-radius: 0; |
| gl-rounded-l-base | border-top-left-radius: .25rem; /* 4px */ border-bottom-left-radius: .25rem; /* 4px */ |
| gl-rounded-l-full | border-top-left-radius: 50%; border-bottom-left-radius: 50%; |
| gl-rounded-l-small | border-top-left-radius: .125rem; /* 2px */ border-bottom-left-radius: .125rem; /* 2px */ |
| gl-rounded-l-lg | border-top-left-radius: .5rem; /* 8px */ border-bottom-left-radius: .5rem; /* 8px */ |
| gl-rounded-l-pill | border-top-left-radius: .75rem; /* 12px */ border-bottom-left-radius: .75rem; /* 12px */ |
| gl-rounded-ss-6 | border-start-start-radius: 1.5rem; /* 24px */ |
| gl-rounded-ss-none | border-start-start-radius: 0; |
| gl-rounded-ss-base | border-start-start-radius: .25rem; /* 4px */ |
| gl-rounded-ss-full | border-start-start-radius: 50%; |
| gl-rounded-ss-small | border-start-start-radius: .125rem; /* 2px */ |
| gl-rounded-ss-lg | border-start-start-radius: .5rem; /* 8px */ |
| gl-rounded-ss-pill | border-start-start-radius: .75rem; /* 12px */ |
| gl-rounded-se-6 | border-start-end-radius: 1.5rem; /* 24px */ |
| gl-rounded-se-none | border-start-end-radius: 0; |
| gl-rounded-se-base | border-start-end-radius: .25rem; /* 4px */ |
| gl-rounded-se-full | border-start-end-radius: 50%; |
| gl-rounded-se-small | border-start-end-radius: .125rem; /* 2px */ |
| gl-rounded-se-lg | border-start-end-radius: .5rem; /* 8px */ |
| gl-rounded-se-pill | border-start-end-radius: .75rem; /* 12px */ |
| gl-rounded-ee-6 | border-end-end-radius: 1.5rem; /* 24px */ |
| gl-rounded-ee-none | border-end-end-radius: 0; |
| gl-rounded-ee-base | border-end-end-radius: .25rem; /* 4px */ |
| gl-rounded-ee-full | border-end-end-radius: 50%; |
| gl-rounded-ee-small | border-end-end-radius: .125rem; /* 2px */ |
| gl-rounded-ee-lg | border-end-end-radius: .5rem; /* 8px */ |
| gl-rounded-ee-pill | border-end-end-radius: .75rem; /* 12px */ |
| gl-rounded-es-6 | border-end-start-radius: 1.5rem; /* 24px */ |
| gl-rounded-es-none | border-end-start-radius: 0; |
| gl-rounded-es-base | border-end-start-radius: .25rem; /* 4px */ |
| gl-rounded-es-full | border-end-start-radius: 50%; |
| gl-rounded-es-small | border-end-start-radius: .125rem; /* 2px */ |
| gl-rounded-es-lg | border-end-start-radius: .5rem; /* 8px */ |
| gl-rounded-es-pill | border-end-start-radius: .75rem; /* 12px */ |
| gl-rounded-tl-6 | border-top-left-radius: 1.5rem; /* 24px */ |
| gl-rounded-tl-none | border-top-left-radius: 0; |
| gl-rounded-tl-base | border-top-left-radius: .25rem; /* 4px */ |
| gl-rounded-tl-full | border-top-left-radius: 50%; |
| gl-rounded-tl-small | border-top-left-radius: .125rem; /* 2px */ |
| gl-rounded-tl-lg | border-top-left-radius: .5rem; /* 8px */ |
| gl-rounded-tl-pill | border-top-left-radius: .75rem; /* 12px */ |
| gl-rounded-tr-6 | border-top-right-radius: 1.5rem; /* 24px */ |
| gl-rounded-tr-none | border-top-right-radius: 0; |
| gl-rounded-tr-base | border-top-right-radius: .25rem; /* 4px */ |
| gl-rounded-tr-full | border-top-right-radius: 50%; |
| gl-rounded-tr-small | border-top-right-radius: .125rem; /* 2px */ |
| gl-rounded-tr-lg | border-top-right-radius: .5rem; /* 8px */ |
| gl-rounded-tr-pill | border-top-right-radius: .75rem; /* 12px */ |
| gl-rounded-br-6 | border-bottom-right-radius: 1.5rem; /* 24px */ |
| gl-rounded-br-none | border-bottom-right-radius: 0; |
| gl-rounded-br-base | border-bottom-right-radius: .25rem; /* 4px */ |
| gl-rounded-br-full | border-bottom-right-radius: 50%; |
| gl-rounded-br-small | border-bottom-right-radius: .125rem; /* 2px */ |
| gl-rounded-br-lg | border-bottom-right-radius: .5rem; /* 8px */ |
| gl-rounded-br-pill | border-bottom-right-radius: .75rem; /* 12px */ |
| gl-rounded-bl-6 | border-bottom-left-radius: 1.5rem; /* 24px */ |
| gl-rounded-bl-none | border-bottom-left-radius: 0; |
| gl-rounded-bl-base | border-bottom-left-radius: .25rem; /* 4px */ |
| gl-rounded-bl-full | border-bottom-left-radius: 50%; |
| gl-rounded-bl-small | border-bottom-left-radius: .125rem; /* 2px */ |
| gl-rounded-bl-lg | border-bottom-left-radius: .5rem; /* 8px */ |
| gl-rounded-bl-pill | border-bottom-left-radius: .75rem; /* 12px */ |