Logo SatellaSoft



Bordas arredondadas com CSS3 – (border-radius)

Veja como usar o elemento border-radius a seu favor para gerar cantos arredondados.


Ícone homem Gunnar Correa
Ícone data de publicação 07/07/2015
Ícone quantidade de visualização 2,734
Ícone bandeira do Brasil Português

Antes do CSS 3 ou até mesmo de ter vários navegadores com suporte, para se obter uma DIV ou outros elementos com cantos arredondados, era necessário recorrer ao uso de imagens, posicionamento e deixar cada imagem flutuando, ainda assim dava muitos problemas.

Como esta época já passou, este artigo abordará tudo sobre como deixar bordas arredondadas, inclusive aqui você poderá utilizar um simulador desenvolvido para melhor seus estudos.

Veja a estrutura abaixo, onde temos um documento apenas com uma DIV.

Código 01:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Border-Radius</title>
		<meta charset="utf-8" />
		<style>
		</style>
	</head>
	
	<body>
		<div id="borda">
			<img src="perfil.jpg" alt="Logo" />
		</div>
	</body>
</html>

O resultado pode ser conferido na imagem abaixo.

 

Agora vamos aplicar uma estilização para a div e a imagem.

Código 02:

div{
				width:200px;
				background-color: #CCC;
				border:1px solid #111;
}
			
img{
				margin: 10px;
				border:1px solid red;
}

Na imagem abaixo já é possível notar uma diferença.

Para obter uma borda arredondada, podemos utilizar de várias formas, começamos com a mais simples, que é através da propriedade border-radius, esta propriedade pode ser utilizada da seguinte forma, border-radius: 5px;, neste exemplo, todos os cantos estarão arredondados com 5px. É possível especificar o tamanho de arredondamento para cada canto, para isto utilizamos, border-radius: 10px 10px 5px 8px;, onde pode ser variado o tamanho de acordo com a necessidade, veja a baixo onde cada valor é aplicado em uma borda.

Com as duas técnicas apresentadas acima, vamos aplicar o primeiro exemplo na div e a segunda na imagem, vejam o código utilizado e o resultado abaixo.

Código 03:

div{
	border-radius: 10px;
}
			
img{

	border-radius:5px 10px 20px 20px;
}

Este mesmo bloco de código foi testado nos navegadores, Google Chrome, Firefox, Maxthon e Internet Explorer, veja o resultado na imagem abaixo.

Existe outra forma de se obter o resultado, é necessário especificar a propriedade referente ao lado que se deseja como, border-top-left-radius: 5px;, neste caso o canto superior esquerdo terá uma curvatura/largura de 5px.

Veja sua utilização, no bloco de código abaixo, onde é aplicado estilizações no elemento img.

Código 04:

img{
				
	/*Topo esquerdo*/
	border-top-left-radius:10px;
				
	/*Topo direita*/
	border-top-right-radius:20px;
				
	/*Baixo esquerda*/
	border-bottom-left-radius:30px;
				
	/*Baixo direita*/
	border-bottom-right-radius:50px;
}

Abaixo você pode conferir o resultado desta estilização.

Até aqui você já consegue atribuir bordas arredondadas, para que você possa entender melhor o conteúdo explicado, utilize o simulador abaixo.

 

Você pode selecionar a cor da borda, cor de fundo e definir a largura da curvatura para o border-radius, selecione um valor para cada borda.

Para um melhor entendimento, confira a imagem de exemplo abaixo.

Para conferir mais informações sobre o border-radius, recomendo a leitura da documentação, através do link https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius.

Caso houver dúvida, deixem nos comentários.




Sobre o autor


Gunnar Correa

Nome: Gunnar Correa

Site: http://www.gunnarcorrea.com


Autodidata, graduado em Desenvolvimento Web e especialista em Tecnologias na Educação em uma universidade no interior de São Paulo. Comecei meus estudos na área de programação quando ainda era criança, e atualmente estou estudando desenvolvimento de jogos.

Sou o CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!