1 Anexo(s)
Borda da Box arredondada sem img
Olá galera estou aqui para Postar um tutorialzinho sobre css, creio que muitos já saibam fazer isso, mais eu irei postar mesmo assim ^^' !
Criando Box com Bordas arredondadas sem Img!
Vamos lá, irei ultilizar o seguinte código css:
Código HTML:
@charset "utf-8";/* CSS Document */
.bordaBox {
bbackground: ttransparent;
width:90%;
}
.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:#000;
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:white;
border-left:1px solid #999;
border-right:1px solid #999;
}
Bom é bem básico fazer isto basta criar uma div para a box com a class: bordaBox
Código HTML:
<div id="box" class="bordaBox">Exemplo</div>
Até o momento nenhum efeito foi colocado na div.
Agora iremos acrescentar o seguinte código a nossa div
Código HTML:
<div id="box" class="bordaBox">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="conteudo">
Vejam o Exemplo</div>
Este código definirá a parte superior da nossa borda.
[Only registered and activated users can see links. Click Here To Register...]
Continuando:
Agora adicionaremos o seguinte código a parte inferior da div
Código HTML:
Vejam o Exemplo</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>
Esta parte irá criar a parte inferior da borda.
Pronto, box com cantos arredondados basta agora você modificar do seu gosto :)
Resultado final:[Only registered and activated users can see links. Click Here To Register...]
Espero que ajude vocês :)
Minha box: [Only registered and activated users can see links. Click Here To Register...]
---------------------------------------------------------------------------------------
Dica do LucasHP
Estilo (CSS):
Código HTML:
@charset "utf-8";
.box{
background:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #999;
border-top:3px solid #333;
border-bottom:3px solid #333;
padding:5px 10px;
}
Estrutura (HTML):
Código HTML:
<div class="box"> Conteudo do box aqui...</div>
[Only registered and activated users can see links. Click Here To Register...]
Créditos
FuryousⱣɃ pelo Tutorial
CodigoFonte Pelo código css
