Tutorial de CSS

CSS INÍCIO Introdução CSS Sintaxe CSS Seletores CSS CSS Como fazer Comentários CSS Cores CSS Planos de fundo CSS Bordas CSS Margens CSS Preenchimento CSS CSS Altura/Largura Modelo de caixa CSS Esboço CSS Texto CSS Fontes CSS Ícones CSS Links CSS Listas CSS Tabelas CSS Exibição CSS Largura máxima do CSS Posição CSS Índice Z CSS Estouro de CSS CSS flutuante Bloco CSS Inline Alinhamento CSS Combinadores CSS Pseudoclasse CSS Pseudoelemento CSS Opacidade CSS Barra de navegação CSS Listas suspensas de CSS Galeria de imagens CSS Sprites de imagem CSS Seletores de atributos CSS Formulários CSS Contadores CSS Layout do site CSS Unidades CSS Especificidade CSS CSS !importante Funções matemáticas CSS

CSS Avançado

Cantos arredondados CSS Imagens de borda CSS Planos de fundo CSS Cores CSS Palavras-chave de cores CSS Gradientes CSS Sombras CSS Efeitos de texto CSS Fontes da Web CSS Transformações CSS 2D Transformações CSS 3D Transições CSS Animações CSS Dicas de CSS Imagens de estilo CSS Reflexão de imagem CSS Ajuste de objeto CSS posição do objeto CSS Mascaramento CSS Botões CSS Paginação CSS CSS Múltiplas Colunas Interface de usuário CSS Variáveis ​​CSS Dimensionamento da caixa CSS Consultas de mídia CSS Exemplos de CSS MQ CSS Flexbox

Responsivo a CSS

Introdução ao RWD Janela de visualização RWD Visualização de Grade RWD Consultas de mídia RWD Imagens RWD Vídeos RWD Estruturas RWD Modelos RWD

Grade CSS

Introdução à grade Contêiner de Grade Item de grade

CSS SASS

Tutorial SASS

Exemplos de CSS

Modelos CSS Exemplos de CSS teste css Exercícios de CSS Certificado CSS

Referências CSS

Referência CSS Seletores CSS Funções CSS Aural de referência CSS Fontes CSS seguras para a Web CSS Animatable Unidades CSS CSS PX-EM Converter Cores CSS Valores de cores CSS Valores padrão de CSS Suporte ao navegador CSS

Cantos arredondados CSS


Cantos arredondados CSS

Com a propriedade CSS border-radius, você pode dar "cantos arredondados" a qualquer elemento.


Propriedade CSS border-radius

A propriedade CSS border-radiusdefine o raio dos cantos de um elemento.

Dica: Esta propriedade permite adicionar cantos arredondados aos elementos!

Aqui estão três exemplos:

1. Cantos arredondados para um elemento com uma cor de fundo especificada:

Cantos arredondados!

2. Cantos arredondados para um elemento com borda:

Cantos arredondados!

3. Cantos arredondados para um elemento com imagem de fundo:

Cantos arredondados!

Aqui está 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;
}

Dica: A border-radiuspropriedade é, na verdade, uma propriedade abreviada para as propriedades border-top-left-radius, border-top-right-radiuse .border-bottom-right-radiusborder-bottom-left-radius



CSS border-radius - Especificar cada canto

A border-radiuspropriedade pode ter de um a quatro valores. Aqui estão as regras:

Quatro valores - raio da borda: 15px 50px 30px 5px; (o primeiro valor se aplica ao canto superior esquerdo, o segundo valor se aplica ao canto superior direito, o terceiro valor se aplica ao canto inferior direito e o quarto valor se aplica ao canto inferior esquerdo): 

Três valores - border-radius: 15px 50px 30px; (o primeiro valor se aplica ao canto superior esquerdo, o segundo valor se aplica aos cantos superior direito e inferior esquerdo e o terceiro valor se aplica ao canto inferior direito):

Dois valores - border-radius: 15px 50px; (o primeiro valor se aplica aos cantos superior esquerdo e inferior direito, e o segundo valor se aplica aos cantos superior direito e inferior esquerdo):

Um valor - raio da borda: 15px; (o valor se aplica a todos os quatro cantos, que são arredondados igualmente:

Aqui está 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;
}

Você também 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;
}

Teste-se com exercícios

Exercício:

Dê ao elemento div cantos arredondados.

<style>
div {
  background: red;
  : 10px;  
}
</style>

<body>
  <div>This is a div element. It has some text.</div>
</body>


Propriedades de cantos arredondados CSS

Property Description
border-radius A shorthand property for setting all the four border-*-*-radius properties
border-top-left-radius Defines the shape of the border of the top-left corner
border-top-right-radius Defines the shape of the border of the top-right corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
border-bottom-left-radius Defines the shape of the border of the bottom-left corner