Quarta, 16 de Agosto de 2017




 Detalhe Solução

 HTML: Formatar um elemento html com bordas arredondadas:

Código exemplo:

<!DOCTYPE html>
<html>
<style>
.borda_redonda{
border: 1px solid #333333;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
</style>
<div class=borda_redonda>
 Elemento com borda redonda
</div>
</html>

Obs.:
  • através do elemento de estilo border define-se como será a borda. No caso, contínua com 1 píxel de largura na cor #333333 (grafite);
  • através dos 3 elementos de estilo border-radius seguintes define-se que será uma borda de 8 píxels de raio nos 4 cantos;
  • Pode-se definir cada canto separadamente com 4 valores seguidos, como 8px 8px 8px 8px, sendo respectivamente os raios dos cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo. Use a mesma definição para os 3 comandos border-radius;
  • Pode funcionar para outros elementos além do <div>, como o <td>;
  • Para funcionar no Internet Explorer é necessário ter a tag <!DOCTYPE html> no início da página, antes da tag <html>.



¤ Links Relacionados:
- Veja todas as soluções do site


Gostou?   Compartilhe ou comente: