Ir para conteúdo
Fórum Script Brasil
  • 0

Bordas Arrendondadas


Guest - Caio Costa -

Pergunta

9 respostass a esta questão

Posts Recomendados

  • 0

Bordas arredondadas:

Sim, é possivel, é sh usar o truque do malandro!

a tabela não é arredondada, mas você cria uma pequena imagem do que seria o arredondamento e coloca exatamente beirando a linha da tabela! wink.gif

malandro não! ....é NINJA!!!! ph34r.gif

rs tongue.gif

Link para o comentário
Compartilhar em outros sites

  • 0
Guest Fábio Penna

Criar bordas arredondadas sem utilizar imagensvisto por 7619 vez(es)

Posso afirmar que todos os profissionais que trabalham com web um dia precisarão criar páginas que tenham bordas arredondadas (também conhecida como Round Corners).

Existem diversas formas de se gerar esse efeito no HTML mas esta solução é uma das melhores, pois não utiliza imagens, é de fácil implementação e não suja o código com tables.

Criar esse efeito é, sem dúvida, um dos grandes desafios dos Webdesigners e agora está disponível para implementar em seu site.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Borda Arredondada sem utilizar imagens</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
.bordaBox {bbackground: ttransparent; width:30%;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}
.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}
.bordaBox .b1 {margin:0 5px; background:#999;}
.bordaBox .b2 {margin:0 3px; border-width:0 2px;}
.bordaBox .b3 {margin:0 2px;}
.bordaBox .b4 {height:2px; margin:0 1px;}
.bordaBox .conteudo {padding:5px;display:block; background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}
</style>
<body>

<div class="bordaBox">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="conteudo">
Box com bordas arredondadas sem utilizar imagens<br />Fácil utilização e implementação com CSS puro!
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

</body>
</html>

Link para o comentário
Compartilhar em outros sites

  • 0
Guest Ícaro Marconcini de Ungaro
Bordas arredondadas:

Sim, é possivel, é sh usar o truque do malandro!

a tabela não é arredondada, mas você cria uma pequena imagem do que seria o arredondamento e coloca exatamente beirando a linha da tabela! ;)

malandro não! ....é NINJA!!!! :ph34r:

rs :P

Achei muito legal o comando.

Como faço pra colocar uma imagem GIF ou JPG no fundo e como centralizo a tabela em tamanho 90%?

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...