tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Cantos arredondados


CSS3 cantos arredondados

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


Suporte a navegadores

Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.

Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.

Propriedade
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

CSS3 border-radius propriedade

Com CSS3, você pode dar qualquer elemento "cantos arredondados", usando o border-radius propriedade.

Aqui estão três exemplos:

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

Cantos arredondados!

2. Cantos arredondados para um elemento com uma borda:

Cantos arredondados!

3. Os cantos arredondados para um elemento uma 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;
}
Tente você mesmo "
NotaDica: o border-radius propriedade é na verdade um atalho para o border-top-left-radius , border-top-right-radius , border-bottom-right-radius e border-bottom-left-radius propriedades.

CSS3 border-radius - discriminar cada canto

Se você especificar apenas um valor para o border-radius propriedade, este raio será aplicada a todos os 4 cantos.

No entanto, você pode especificar cada canto separado, se assim o desejar. Aqui estão as regras:

  • Quatro valores: primeiro valor aplica-se a parte superior esquerda, segundo valor aplica-se a parte superior direita, o terceiro valor aplica-se inferior direito, e quarto valor se aplica ao canto inferior esquerdo
  • Três valores: primeiro valor aplica-se a parte superior esquerda, o segundo valor aplica-se superior direito e inferior esquerdo, e terceiro valor aplica-se a parte inferior direita
  • Dois valores: o primeiro valor refere-se para o canto superior esquerdo e inferior direito, e o segundo valor aplica-se superior direito e canto inferior esquerdo
  • Um valor: todos os quatro cantos são arredondados igualmente

Aqui estão três exemplos:

1. Quatro valores - border-radius: 15px 50px 30px 5px :

2. Três valores - border-radius: 15px 50px 30px :

3. Dois valores - border-radius: 15px 50px :

Aqui está o código:

Exemplo

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

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
Tente você mesmo "

Você também pode criar cantos elípticas:

Exemplo

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

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

#rcorners9 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}
Tente você mesmo "

Teste-se com exercícios!

Exercício 1 » Exercício 2»


CSS3 cantos arredondados Propriedades

Propriedade Descrição
border-radius Um atalho para definir todos os quatro fronteira - * - * - propriedades de raio
border-top-left-radius Define a forma da borda do canto superior esquerdo
border-top-right-radius Define a forma da borda do canto superior direito
border-bottom-right-radius Define a forma da borda do canto inferior direito
border-bottom-left-radius Define a forma da borda do canto inferior esquerdo