Закругление углов таблиц и блоков с помощью css

Чтобы углы таблицы или блока отображались на странице сайта закругленными можно использовать несколько вариантов.

Закругление углов, один фоновый рисунок

Для начала делаем картинку с нужным размером, цветом и формой. Размер картинки зависит от размера текста, который вы хотите поместить в блок или таблицу с закругленными углами.

В HTML пишем:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="table-round1">
<tr>
<td>
<p> Текст </p>
</td>
</tr>
</table>

В CSS указываем размер и адрес фоновой картинки, размер и цвет шрифта:

#table-round1 {
width:600px;
height:76px;
background: url('images/pic.png') no-repeat;
margin: 0;
padding: 9px;
font:12px verdana, arial, helvetica, sans-serif;
color : #866057;
}

В результате получаем вот такую таблицу:

Закругление углов, три фоновых рисунка

Чтобы иметь возможность вставлять неограниченноо количество знаков и при этом таблица была с закругленными углами потребуется сделать три картинки.

В HTML пишем:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="table-round3">
<tr>
<td class="top"></td>
</tr>
<tr>
<td class="center">
<p> Текст </p>
</td>
</tr>
<tr>
<td class="bottom"></td>
</tr>
</table>

В CSS указываем размеры и адреса фоновых картинкок, размер и цвет шрифта:

#table-round3 {
margin : 0;
padding : 0;
width:600px;
font:12px verdana, arial, helvetica, sans-serif;
color : #866057;
}
.top {
background : url('images/top.png') no-repeat;
height : 10px;
padding : 0;
margin : 0;
}
.center {
background : url('images/center.png') repeat-y;
padding : 8px;
margin : 0;
}
.bottom {
background : url('images/bottom.png') no-repeat;
height : 10px;
padding : 0;
margin : 0;
}

В результате получаем вот такую таблицу:

Закругление углов таблиц и блоков без графики

Также без особых усилий можно сделать таблицу или блок с закруглёнными углами не прибегая к услугам графических редакторов, т.е. без графики. Правда, это работает не во всех браузерах. Лучший браузер всех времен (Internet Explorer) опять отличился, этот метод работает во всех популярных браузерах: Mozilla Firefox, Safari и Google Chrome, кроме Internet Explorer.

В HTML пишем:

<table border="0" cellpadding="0" cellspacing="0" width="600" id="round">
<tr>
<td>
<p> Текст </p>
</td>
</tr>
</table>

или

<div id="round">здесь много текста</div>

В CSS указываем цвет фона, цвет рамки, и т.д.

#round {
background-color: #f5f5f5;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

В результате получаем таблицу или блок с закругленными углами:

Еще один вариант закругления углов блоков

Закругленные углы блока популярнейшая вещь в современном веб-дизайне. Чтобы сотворить такое люди придумали довольно много способов. Вот один из них.

В HTML пишем:

<div id="round-div">
<span class="tan-bg">
<b class="r5"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b>
</span>
<h3>Заголовок</h3>
<div class="inner-box">
Здесь текст
</div>
<b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r5"></b>
</div>

В CSS пишем:

h3 {
margin: 0 0 10px 0;
}
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}
.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
.inner-box {padding:0.7em 1em; }
.inner-box { background-color: Antiquewhite; text-align : justify;}
#round-div {width:400px; margin: 1em;}
#round-div .tan-bg b, #round-div h3 {background-color: Tan; }
#round-div h3 { padding:0.25em 0.75em 0.5em; margin-bottom:0; }
#round-div .inner-box, #round-div b { background-color: Antiquewhite;

В результате получаем вот такой блок с закругленными углами:

Работает во всех популярных браузерах.