Borda da Box arredondada sem img

[Ayrton Ricardo]

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:

@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

<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

<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.

Continuando:
Agora adicionaremos o seguinte código a parte inferior da div

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:

Espero que ajude vocês


Minha box:
---------------------------------------------------------------------------------------

Dica do LucasHP

Estilo (CSS):

@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):

<div class="box">    Conteudo do box aqui...</div>

Créditos

FuryousⱣɃ pelo Tutorial
CodigoFonte Pelo código css

[LucasHP]

Boa dica, porém hj em dia, não tem a nescessidade dessa 'complicação' toda, nem dessa quantidade de tags / estilos...

Um meio mais simples:
Estilo (CSS):

@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):

<div class="box">
	Conteudo do box aqui...
</div>

Resultado:
[Somente usuários registrados podem vem os links. ]