Arredondamento do CSS

Arredondamento do CSS

através do CSS border-radius A propriedade pode implementar o estilo 'arredondamento' de qualquer elemento.

Propriedade border-radius CSS

CSS border-radius O atributo define o raio dos cantos do elemento.

Dica:Você pode usar essa propriedade para adicionar arredondamentos aos elementos!

Aqui estão três exemplos:

1. Elementos com cor de fundo especificada arredondados:

Arredondamento!

2. Elementos com bordas arredondadas:

Arredondamento!

3. Elementos com imagens de fundo arredondados:

Arredondamento!

Este é o código:

Exemplo

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Experimente você mesmo

Dica:border-radius O atributo é na verdade uma abreviação dos seguintes atributos:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - especifica cada canto

border-radius O atributo pode aceitar de um a quatro valores. As regras são as seguintes:

Quatro valores - border-radius: 15px 50px 30px 5px;(Usados respectivamente: canto superior esquerdo, canto superior direito, canto inferior direito, canto inferior esquerdo):

Três valores - border-radius: 15px 50px 30px;(O primeiro valor é usado para o canto superior esquerdo, o segundo valor é usado para o canto superior direito e inferior esquerdo, o terceiro para o canto inferior direito):

Dois valores - border-radius: 15px 50px;(O primeiro valor é usado para o canto superior esquerdo e inferior direito, o segundo valor é usado para o canto superior direito e inferior esquerdo):

Um valor - border-radius: 15px;(Este valor é usado para todos os quatro cantos, os arredondamentos são iguais):

Este é o código:

Exemplo

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Experimente você mesmo

Você ainda pode criar cantos elípticos:

Exemplo

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

Experimente você mesmo

Atributo de arredondamento de canto CSS

Atributo Descrição
border-radius Propriedade abreviada para definir todos os quatro atributos border-*-*-radius.
border-top-left-radius Definir a forma do canto superior esquerdo da borda.
border-top-right-radius Definir a forma do canto superior direito da borda.
border-bottom-right-radius Definir a forma do canto inferior direito da borda.
border-bottom-left-radius Definir a forma do canto inferior esquerdo da borda.