Gostou?

Este é um artigo da série de Tutoriais do Cria [em] Ação que preparamos para você.

Você pode utilizar este tutorial em outras reproduções, desde que mencione a fonte e não modifique as palavras.

Qualquer dúvida sobre reprodução, crítica ou derivado, entrar em contato com o site.

Aproveite para aprender, é de graça!

Aprenda a criar cantos arredondadas com CSS

Uma grande dificuldade de todos os desenvolvedores da páginas que usam HTML é criar bordas ou cantos arredondadas para suas páginas. Há métodos para a implantação que funcionam normalmente, como a criação de tabela e imagens laterais, ou até mesmo javascript, mas há poucos recursos em CSS e HTML. Com o avanço da tecnologia e linguagem, o CSS3 cheg para inovar, trazendo a possibilidade de criar bosrdas arredondadas apenas com HTML e CSS, como você aprenderá a fazer.

Cantos arredondados com CSS3

Como este é um código que nem todos os navegadores estão prontos para mostrar na página é necessário adicionar as propriedades responsáveis pela criação das bordas [border-radius]. Vamos ver um exemplo com 3px:

#contenedorr3 { border-radius:3px; -moz-border-radius:3px; /* Firefox */ -webkit-border-radius:3px; /* Safari y Chrome */ /* Otros estilos */ border:1px solid #333; background:#eee; width:100%; padding:5px; }

Depois na aplicação do código em algum lugar na sua página ficara assim:

<div id="contenedorr3"> <p>Este es un contenedor con bonitos bordes redondeados de 3px</p> </div>

E o resultado final para o leitor será:

Este é um cantinho com bonitas bordas arredondas de 3px

Você também pode expecificar canto por canto, o raio da curvatura. Por exemplo:

<style type="text/css">
#contenedorr10{
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;

-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:0px;

/* Otros estilos */
border:1px solid #333;
background:#eee;
width:100%;
padding:5px;
}
</style>

Este é um cantinho com bonitas bordas arredondas de 10y e 0px

Vale lembrar que apenas 3 dos atuais navegadores dão suporte ao código, são eles:
Firefox desde versão 1.0
Safari desde versão 3.0
Google Chrome desde 1.0

Internet Explorer e demais não funcionam com bordas mas funciona como destaque

Créditos a

Blog and Web

Colocando um selo do nosso site no seu blog ou site o leitor sempre voltará para clicar neste selo.