УрокСпособы закругления уголков. 1 способ.

Закругленные углы - одна из любимейших "фишек" дизайнеров в современном интернете. Есть множество вариантов их реализации, простых и не очень. Например, такой всем известный браузер FireFox поддерживает специфическое решение: -moz-border-radius. Достаточно указать для контейнера его значение 10px - и углы закруглены! Однако полезность данного метода сомнительна, ибо пригоден он только для FF. Просмотрев эту же страницу в другом браузере, например в Opera, мы увидим что никаких закругленных уголков нет.

Ну а теперь перейдём к более кроссбраузерному решению. Оно действительно самое кроссбраузерное, так как используется только картинка для фона и дополнительные контейнеры.

Закругляем углы, используя CSS и 4 картинки

Для начала создайте эти 4 картинки углов, это можно сделать с помощью большинства графических программ, желательно, что бы картинки были квадратными (с одинаковыми размерами сторон, например по 20 пикселей).

Вот пример таких картинок:

Что бы проще было описывать пути к картинкам, лучше назвать их полагаясь на какую-либо логику. К примеру, я назвал свои 4 картинки следующим образом: tl.gif, tr.gif, bl.gif, br.gif.
Это означает: tl - top left, tr - top right, bl - bottom left, br - bottom right. Все кто знаком с английским, я надеюсь, поймёт что к чему.

Теперь, когда мы точно знаем как называются картинки и точно представляем себе задуманное, переходим к написанию каскадной таблицы стилей (CSS). Вот собственно весь код для наших уголков:

div.top-left {
    background: url("img/tl.gif") no-repeat scroll left top transparent;
}
 
div.top-right {
    background: url("img/tr.gif") no-repeat scroll right transparent;
}
 
div.bottom-left {
    background: url("img/bl.gif") no-repeat scroll bottom left transparent;
}
 
div.bottom-right {
    background: url("img/br.gif") no-repeat scroll right bottom transparent;
}

Ничего сложного нет - просто для каждого контейнера указываем фон и его положение. Теперь нам остается лишь правильно воспользоваться им. Для этого необходимо весь контент, который должен находится в закругленном контейнере положить в общий div (в моем примере это div box) и задать ему цвет идентичный цвету уголков. Затем сразу после открытия и до закрытия общего дива положить четыре вложенных друг в друга верхних (top-left и top-right) и соответственно нижних (bottom-left и bottom-right) дива. Вот наглядный пример html кода:

<div class="box"> 				
  <div class="top-right"> 
    <div class="top-left"> 
      <div class="bottom-left"> 
        <div class="bottom-right"> 
          <p> Ваш контент здесь. </p>              
        </div> 
      </div> 
    </div> 		
  </div  				
</div>

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

Плюсы данного метода:

• прост в понимании
• кроссбраузерный (что очень важно!)

Минусы его же:

• много хтмл-кода (минус для seo-продвижения)
• фон вне уголков нельзя сделать прозрачным

Вот и всё, а пользоваться этим методом или нет - решать вам! Я же ещё предложу несколько способов.