Блок с закруглёнными углами DIV и CSS

Делаем закругленные углы CSS
Сначала создадим элемент div 

 

Пропишем стили:

#test{
background:#F00;
width:100px;
height:100px
}

Наш квадрат готов.



Теперь зададим свойства закругления. Для этого используем команду: border-radius

#test{
Width:100px;
Height:100px;
border-radius:6px; 
-webkit-border-radius:6px; 
-moz-border-radius:5px; 
-khtml-border-radius:10px;

}

Смотрим результат и радуемся.

Теперь немного разберем код:
border-radius:6px — Свойство CSS3. Чем больше значение в пикселях, тем сильнее скруглённые углы;

-webkit-border-radius:6px — Хак для включения поддержки закругления в браузерах на основе webkit (Google Chrome и Safari).

Но стоит заметить, в последних версиях браузеров Chrome и Safari для поддержки border-radius не нужны никакие хаки.

-moz-border-radius:5px — Хак для включения поддержки закругления в браузере Firefox. Без него будет просто квадрат;

-khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux.


Так, что наш код можно записать так:

#test{
Width:100px;
Height:100px;
border-radius:6px;  
-moz-border-radius:5px; 
-khtml-border-radius:10px;

}

Закругления для выбранных углов

Допустим, вы хотите закруглить только выбранные углы. Как, например на моем блоге вверху сделана строка поиска.

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

Для этого изменим наш код:


#test{
Width:100px;
Height:100px;
border-radius: 0 0 6px 6px;
-moz-border-radius:0 0 6px 6px; 
-khtml-border-radius: 0 0 6px 6px;

}

border-radius: 1 2 3 4;
1  Верхний левый угол;
2  Верхний правый угол;
3  Нижний правый угол;

4  Нижний левый угол;