Толстая закруглённая рамка

2008-02-28 / Рубрика: CSS

Предлагаю вашему вниманию вариант реализации блока с закруглёнными уголками и толстой рамкой.

Исходным материалом послужили примеры закруглённых уголков.

Когда мне совсем нечего делать я открываю текстовый редактор и начинают делать блоки с закруглёнными уголками. На этот раз я сделал блок с закруглёнными уголками и толстой рамкой.

А вот исходники CSS

body {
 background-color:#FFF;
}
 
#v2 {
 width: 50%;
 margin: 30px auto 15px;
}
.text {
 background-color:#000;
 border: 1px solid #000;
 border-width: 0 1px;
 padding: 0px 4px;
}
.textw {
 background-color:#FFF;
 border: 1px solid #FFF;
 border-width: 0 1px;
 padding: 5px 10px;
}
 
.v1, .v2, .v3, .v4, .v5, .v6 {
 height: 1px;
 font-size: 1px;
 display: block;
 overflow: hidden;
 border: 1px solid #000;
 border-width: 0 1px;
}
.v1 {margin: 0 6px; background: #000;}
.v2 {margin: 0 4px; background: #000; border-width: 0 2px;}
.v3 {margin: 0 3px; background: #000;}
.v4 {margin: 0 2px; background: #000;}
.v5 {margin: 0 1px; background: #000;}
.v6 {margin: 0 1px; background: #FFF; border-width: 0 9px;}
 
.w1, .w2, .w3, .w4, .w5 {
 height: 1px;
 font-size: 1px;
 display: block;
 overflow: hidden;
 border: 1px solid #FFF;
 border-width: 0 1px;
}
.w1 {margin: 0 3px; background: #FFF;}
.w2 {margin: 0 2px; border-width: 0 2px; background: #FFF;}
.w3 {margin: 0 1px; background: #FFF;}
.w4 {margin: 0 1px; background: #FFF;}
.w5 {margin: 0 1px; background: #FFF;}

HTML

<div id="v2">
 <b class="v1"></b><b class="v2"></b><b class="v3"></b><b class="v4"></b><b class="v5"></b><b class="v6"></b>
 <div class="text">
  <div>
   <b class="w1"></b><b class="w2"></b><b class="w3"></b><b class="w4"></b>
   <div class="textw">Когда мне совсем нечего делать я открываю текстовый редактор и начинают делать блоки с закруглёнными уголками. На этот раз я сделал блок с закруглёнными уголками и толстой рамкой.
   </div>
   <b class="w4"></b><b class="w3"></b><b class="w2"></b><b class="w1"></b>
  </div>
 </div>
 <b class="v6"></b><b class="v5"></b><b class="v4"></b><b class="v3"></b><b class="v2"></b><b class="v1"></b>
</div>