19
MAR
2013
autor
XyBeR
categoria
Tectudo
Cantos arredondados com CSS

Arredondado

Um elemento DIV quando aplicado um fundo ou bordas tem a impressão de um quadrado ou retângulo conforme as dimensões, hoje é possível através do uso de CSS definir cantos arredondados.

Para solucionar um problema muito frequente no desenvolvimento de locais os cantos não são arredondados as novas definições do CSS3 irão auxiliar os usuários neste quesito. Através do uso da propriedade border-radius é possível definir a curvatura dos cantados do nosso elemento, permitindo ao usuário até criar um elemento em forma de circulo.

Como ainda não temos disponíveis para todos os navegadores as especificações completas do CSS3 teremos que tomar algumas precauções para que seus usuários também possam desfrutar desta funcionalidade.

No caso do IE teremos que atrelar um arquivo border-radius.htc para que as definições de arredondamento sejam aplicadas nas versões deste navegador, para os demais navegadores iremos também utilizar alguns outros elemento para garantir a integridade -moz-border-radius, -khtml-border-radius e -webkit-border-radius.

Para as propriedades border-radius, -moz-border-radius, -khtml-border-radius e -webkit-border-radius é possível informar mais de uma valor ou seja alguns cantos podem ter valores diferentes assim como tratamos o uso de margin e padding no CSS.

No primeiro exemplo vamos definir um valor único para cada canto:

HTML

	<div class="borda-curva1"></div>

CSS

	.borda-curva1 {
		width: 300px;
		height: 300px;
		background-color: #3465AD;
		border: 2px solid #3399FF;
		-moz-border-radius: 30px;
		-khtml-border-radius: 30px;
		-webkit-border-radius: 30px;
		border-radius: 30px;
		behavior: url(border-radius.htc);
	}

Resultado:

No segundo exemplo vamos definir valores distintos para cada canto:

HTML

	<div class="borda-curva2"></div>

CSS

	.borda-curva2 {
		width: 300px;
		height: 300px;
		background-color: #3465AD;
		border: 2px solid #3399FF;
		-moz-border-radius: 30px 50px 70px 90px;
		-khtml-border-radius: 30px 50px 70px 90px;
		-webkit-border-radius: 30px 50px 70px 90px;
		border-radius: 30px 50px 70px 90px;
		behavior: url(border-radius.htc);
	}

Resultado:

Bom divertimento XD

Compartilhar

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

EuNaoSouNerd.com.br © 2010-2013 - Se for copiar, cite a fonte. Obrigado.