Bordas arredondadas com CSS3

Curso Escrevendo testes automatizados com PHPUnit

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.

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

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

Referências

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