Este código é semantico?

Bom dia pessoal,

Estava eu pesquisando pela internet sobre rounded corners e me deparei com esse código, e juro que não entendi como ele funciona !

XHTML

<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. Fácil utilização e implementação com CSS puro! Fácil utilização e implementação com CSS puro! Fácil utilização e implementação com CSS puro! 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>

CSS

<style type="text/css">
.bordaBox {background: transparent; 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>

Alguem pode me explicar como funciona, porque roda no IE6 e alem de tudo porque valida no W3C?

Fonte:Clique aqui