Делаем рамки и закругленные углы с помощью html и css.

Статья о том, как делать растягивабщиеся блоки с рамками и скругленными углами, не используя таблиц. Естественно, предложенные приемы можно использовать для оформления не только круглых углов, но и любых других.

1. Одноцветный блок с закругленными углами без рамок

   Самое простое. Сначала нужно сделать 4 картинки с уголками: t-l.gif(top-left), t-r.gif(top-right), b-r.gif(bottom-right), b-l.gif(bottom-left). Дальше всё элементарно.
   HTML:

   <div class="corners"><div><div><div>
        Содержание блока
   </div></div></div></div>
   CSS:
   .corners {
        background: #666 url(t-l.gif) top left no-repeat;
   }
   .corners div {
        background: url(t-r.gif) top right no-repeat;
   }
   .corners div div {
        background: url(b-r.gif) bottom right no-repeat;
   }
   .corners div div div {
        background: url(b-l.gif) bottom left no-repeat;
   }
   Вот как это выглядит(при изменении размера окна выглядит особо хорошо):

   блок без рамки со скругленными углами 

2. Блок с закругленными углами и сплошной рамкой

   Картинки: t-l.gif, t-r.gif, b-r.gif, b-l.gif.
   HTML:

   <div class="corners"><div><div><div><div>
        Содержание блока
   </div></div></div></div></div>
   CSS:
   .corners {
         background: #666;
         border: 3px solid #999;
   }
   .corners div {
         background: url(t-l.gif) top left no-repeat;
         position: relative;
         margin: -3px; /* значение указываем равным толщине рамки */
   }
   .corners div div {
         background: url(t-r.gif) top right no-repeat;
         margin: 0px;
   }
   .corners div div div {
         background: url(b-r.gif) bottom right no-repeat;
   }
   .corners div div div div {
         background: url(b-l.gif) bottom left no-repeat;
   }
   Вот как это выглядит(при изменении размера окна выглядит особо хорошо):
   блок с закругленными углами и сплошной рамкой

3. Блок с закругленными углами и сложной художественной рамкой

   Картинки: t-l.gif, t-r.gif, b-r.gif, b-l.gif — всё те же уголки. Рамки также будем вставлять бэкграундами: t.gif(top), r.gif(right), b.gif(bottom), l.gif(left),
   HTML:

   <div class="borders"><div><div><div><div><div><div><div>
        Содержание блока
   </div></div></div></div></div></div></div></div>
   CSS:
   .borders {
        background: #666 url(t.gif) top repeat-x;
   }
   .borders div {
         background: url(r.gif) right repeat-y;
   }
   .borders div div {
         background: url(b.gif) bottom repeat-x;
   }
   .borders div div div {
        background: url(l.gif) left repeat-y;
   }
   .borders div div div div {
         background: url(t-l.gif) top left no-repeat;
   }
   .borders div div div div div {
         background: url(t-r.gif) top right no-repeat;
   }
   .borders div div div div div div {
         background: url(b-r.gif) bottom right no-repeat;
   }
   .borders div div div div div div div {
         background: url(b-l.gif) bottom left no-repeat;
   }
   Вот как это выглядит:
   блок с закругленными углами и сложной художественной рамкой

Закруглённые уголки с помощью CSS3

P.S. На данный момент вышеописанные методы создания закруглённых рамок и уголков являются оптимальными, так как поддерживаются всеми популярными браузерами. В будущем (надеюсь, скором), все популярные браузеры будут поддерживать CSS-свойство border-radius, позволяющее делать закруглённые уголки для любого блока всего одной строчкой в CSS-файле и одним элементом HTML. К сожалению, пока что это только в перспективе.