Como arredondo apenas os cantos superiores?

Ajuste os controles deslizantes superior esquerdo e superior direito para o raio desejado e deixe os dois de baixo em zero. A previa se atualiza enquanto voce arrasta, e o CSS copiado mantem os cantos inferiores retos.

Qual CSS a ferramenta me da?

Ela gera uma regra border-radius pronta para uso com os quatro valores de canto em ordem: superior esquerdo, superior direito, inferior direito, inferior esquerdo. Cole diretamente na sua folha de estilo.

Minhas configuracoes sao enviadas para algum lugar?

Nao. A previa e o CSS sao gerados inteiramente no seu navegador, entao nada e enviado a um servidor. Nao ha upload nem cadastro.

Gerador de Border Radius CSS

Superior esquerdo: 16px

Superior direito: 16px

Inferior direito: 16px

Inferior esquerdo: 16px

CSS

.element {
  border-radius: 16px 16px 16px 16px;
}

O que esta ferramenta faz

Esta ferramenta permite que voce de forma a cantos arredondados a olho e fornece o valor CSS border-radius correspondente. Voce arrasta um controle deslizante para cada um dos quatro cantos e uma caixa de previa ao vivo se atualiza em tempo real, para que voce veja exatamente como a forma fica antes de decidir. Ela ajuda os desenvolvedores front-end que querem um valor preciso sem tentativa e erro, os designers que criam o estilo de um componente e qualquer pessoa que esteja aprendendo como o border-radius controla as curvas dos cantos.

Como cada canto tem seu proprio controle deslizante, voce nao fica limitado a um arredondamento uniforme. Voce pode arredondar apenas a parte de cima, criar um formato de pilula ou curvar um unico canto para uma aba ou um cartao.

Como usar

Arraste o controle deslizante superior esquerdo para definir a curva do canto superior esquerdo.
Arraste o controle deslizante superior direito para o canto superior direito.
Arraste o controle deslizante inferior direito para o canto inferior direito.
Arraste o controle deslizante inferior esquerdo para o canto inferior esquerdo.
Acompanhe a atualizacao da previa a cada mudanca ate a forma ficar do jeito certo.
Copie a regra CSS border-radius gerada e cole na sua folha de estilo.

Um exemplo rapido

Para fazer um cartao com o topo arredondado e a base reta, eleve os controles superior esquerdo e superior direito ao mesmo valor e mantenha o inferior esquerdo e o inferior direito em zero. A previa mostra um formato parecido com uma aba, e a regra copiada se le mais ou menos como border-radius: 16px 16px 0 0;. Um deslize comum e esquecer que os valores seguem no sentido horario a partir do canto superior esquerdo, entao confira a previa se um canto se curvar onde voce nao esperava.

Ela funciona inteiramente no seu navegador, mantem seu trabalho privado, e totalmente gratuita e nao precisa de cadastro.

Perguntas frequentes

Como arredondo apenas os cantos superiores?: Ajuste os controles deslizantes superior esquerdo e superior direito para o raio desejado e deixe os dois de baixo em zero. A previa se atualiza enquanto voce arrasta, e o CSS copiado mantem os cantos inferiores retos.
Qual CSS a ferramenta me da?: Ela gera uma regra border-radius pronta para uso com os quatro valores de canto em ordem: superior esquerdo, superior direito, inferior direito, inferior esquerdo. Cole diretamente na sua folha de estilo.
Minhas configuracoes sao enviadas para algum lugar?: Nao. A previa e o CSS sao gerados inteiramente no seu navegador, entao nada e enviado a um servidor. Nao ha upload nem cadastro.