Gerador de Border Radius
Arredonde os quatro cantos juntos ou cada um separadamente e copie a linha de border-radius.
CSS
Crie bordas arredondadas com CSS
Cantos arredondados suavizam cards, botões, avatares e imagens. Esta página abre o Gerador de CSS na aba de bordas arredondadas, onde você pode arredondar todos os cantos juntos ou moldar cada um.
Exemplos
| CSS | Forma |
|---|---|
border-radius: 8px; | Card ou botão levemente arredondado |
border-radius: 50%; | Círculo em um quadrado, como um avatar |
border-radius: 999px; | Botão ou etiqueta em formato de pílula |
border-radius: 24px 24px 0px 0px; | Só os cantos de cima arredondados, como em um painel que sobe da parte de baixo da tela |
Pixels ou porcentagem
Valores em pixels mantêm a mesma curva qualquer que seja o tamanho do elemento, o que combina com botões e cards. Valores em porcentagem crescem com o elemento, e cada canto é medido em relação à largura e à altura separadamente, então em um retângulo a curva fica elíptica.
Ferramentas relacionadas
Para adicionar uma sombra ao elemento arredondado, veja o gerador de box-shadow. Para um preenchimento em degradê, veja o gerador de gradiente CSS.