Pequenas Dúvidas

  • HTML
  • CSS
  • JS
  • PHP
  • MySQL
  • Marketing Digital
  • Photoshop

CSS Borda arredondada, como utilizar?

CSS3 border-radius

A borda arredondada em elementos sempre foi um grande problema, em vários casos só se conseguia o resultado esperando utilizando uma imagem de fundo e que geravam outros problemas como, por exemplo, a dificuldade em manipular o elemento (devido a ter um tamanho pré-fixado) em várias resoluções.

Com a propriedade border-radius é possível arredondar os cantos de um elemento, porém por ser um recurso do CSS3 (que está atualmente em desenvolvimento) pode acontecer dos navegadores mais antigos não reconhecerem e fazer a leitura correta desse recurso.

Dessa forma é importante criar ajustes para que mesmo sem os cantos arredondados, o elemento apresente de forma coerente com o layout do projeto.

Bom, então vamos lá:

A sintaxe do css para bordas arredondadas é bem simples:

border-radius: 5px;

Com isso o elemento ficará com 5px de arredondamento em todos os cantos do elemento, acompanhe um exemplo com HTML, CSS e imagem:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Elementos com cantos arredondados</title>
</head>
<body>
    <div id="borda">
    	<p>Elemento com bordas arredondadas</p>
    </div><!-- #borda -->
</body>
</html>

CSS:

<style type="text/css">
#borda {
	width: 350px;
	display: 100px;
	display: block;
	border: solid 1px #069;
	border-radius: 10px;
	text-align: center;
}
</style>

De como fica nos novos navegadores (imagem):

elemento-com-bordas-arredondadasNesse exemplo acima é possível mostrar um leve arredondamento dos quatro cantos.

Também é possível colocar diferentes valores para cada um dos cantos, acompanhe no exemplo abaixo:

 

 

border-top-left-radius: 10px; // 10px de arredondamento no canto superior esquerdo do elemento.

border-bottom-left-radius: 5px; // 5px de arredondamento no canto inferior esquerdo do elemento.

border-top-right-radius: 3px; // 3px de arredondamento no canto superior direito do elemento.

border-bottom-right-radius: 6px // 6px de arredondamento no canto inferior direito do elemento.

 

Compatibilidade com navegadores:

Como especificado anteriormente, alguns navegadores (ou algumas versões deles) não funcionam corretamente e pode ser necessário aplicar alguns hacks, acompanhe abaixo alguns hacks de compatibilidade:

Para algumas versões (mais antigas) do mozilla Firefox:

-moz-border-radius

-moz-border-radius-topleft

-moz-border-radius-topright

-moz-border-radius-bottomright

-moz-border-radius-bottomleft

Para algumas versões do Opera/Safari:

-webkit-border-radius

-webkit-border-radius-topleft

-webkit-border-radius-topright

-webkit-border-radius-bottomright

-webkit-border-radius-bottomleft

É isso pessoal, até a próxima.

Para saber como está o desenvolvimento do CSS3, você pode visitar esse link: http://www.w3.org/standards/techs/css#w3c_all

jan 26, 2015Rodrigo Sarri
CSS Display, como e de que forma utilizar?CSS opacidade (transparência) em qualquer navegador, como fazer?

Deixe uma resposta Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

7 years ago CSSborda com cantos arredondados, border-radius, css, css3
Posts recentes
  • Como abrir arquivos php no navegador? 21 de dezembro de 2015
  • Utilizando o F12, a ferramenta do desenvolvedor 7 de dezembro de 2015
  • Como recortar qualquer imagem usando a ferramenta caneta do Photoshop 3 de dezembro de 2015
  • Enviar dados de um formulário sem atualizar a página com JQUERY (ajax) 7 de abril de 2015
  • Separar as palavras de uma frase em PHP 9 de fevereiro de 2015
Categorias
  • Adobe Dreamweaver
  • CSS
  • Dicas
  • facebook
  • HTML
  • JQUERY
  • JS
  • Marketing Digital
  • MySQL
  • Photoshop
  • PHP
  • Sem categoria
Nuvem de tags
phpcssjqueryhtmljavascriptcss3inlinematrizlayoutfacebookfan pagedimensõesstyleimagensremover espaço em brancoclassdreamweaveradobetruqesdicaclasseidpáginacadastrar site no googleimplodeadicionar item de segurança banco de dadosvalidar emailarrayrandacertar horahorário de verãofuso horáriogerar número aleatóriovalidar campos phpmysqlsitemapcomo cadastrar site no buscadorcadastrar site no bingcadastrar site no yahoositemap para videossitemap para imagenscadastro no banco de dados phpsitemap para smartphonesitemap para googlecomo construir um sitemap
Outras postagens
PHP WideImage
Manipulação de imagens em php com a biblioteca WideImage
7 years ago
Google Yahoo Bing - como cadastrar seu site nos principais buscadores
Cadastrar seu site ou Blog nos principais buscadores
7 years ago
CSS Display
CSS Display, como e de que forma utilizar?
7 years ago
Buscar
2018 © Pequenas Dúvidas - Aprenda um pouco de HTML CSS JS PHP MySQL e Marketing Digital