Utilitário

Border Radius

Controla o arredondamento dos cantos de um elemento.

Classes

Classe CSS	Descrição
`.radius-sm`	`border-radius: var(--radius-sm, 0.1875em);`
`.radius-md`	`border-radius: var(--radius-md, 0.375em);`
`.radius-lg`	`border-radius: var(--radius-lg, 0.75em);`
`.radius-50%`	`border-radius: 50%;`
`.radius-full`	`border-radius: 50em;`
`.radius-inherit`	`border-radius: inherit;`
`.radius-0`	`border-radius: 0;`
`.radius-top-left-0`	`border-top-left-radius: 0;`
`.radius-top-right-0`	`border-top-right-radius: 0;`
`.radius-bottom-right-0`	`border-bottom-right-radius: 0;`
`.radius-bottom-left-0`	`border-bottom-left-radius: 0;`

Variáveis padrão do design system:

:root {
  --radius-sm: 0.1875em;
  --radius-md: 0.375em;
  --radius-lg: 0.75em;
}

Para aplicar um valor da escala em CSS de componente:

.component {
  border-radius: var(--radius-md);
}