Bordas arredondadas com CSS3 – (border-radius)

Gunnar CorreaGunnar Correa07/07/2015 às 06:01:33 - 9.232 acessos

Veja como usar a propriedade border-radius a seu favor e crie bordas arredondadas.


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.

Elemento img no HTML

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.

Elemento img com bordas aplicadas no CSS

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.

Definido a largura de cada borda no css

Código 03:

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

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

Border-radius bottom right e left

Este mesmo bloco de código foi testado nos navegadores, GoogleChrome, Firefox, Maxthon e InternetExplorer, veja o resultado na imagem abaixo.

border-radius funcionando corretamente em alguns navegadores

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.

Border radius css aplicado em algumas bordas.

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

Explicação adicional do border-radius

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


CSS 3 HTML 5 Simulador Desenvolvimento Web Border-radius Border Aula tutorial Arredondados On-line

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários