Закругление углов в CSS3 с помощью border-radius

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Среди новых удобных функций CSS3 является свойство border-radius, при помощи которого можно легко делать скругленные углы элементов на странице. Закругленным можно сделать как любой отдельный угол, несколько углов, так и все четыре угла элемента. Функция успешно работает и с элементами, имеющими фоновое изображение. Практически, border-radius поддерживается во всех современных браузерах, кроме IE8.

Применение свойств CSS без использования изображений

Эффект закругления достигается с помощью свойств:

border-radius: значение
-moz-border-radius: значение
-webkit-border-radius: значение

Если мы выставим «значение», например, 15px, что определяет радиус границ для всех 4-х углов, то получим скругление всех четырёх углов с радиусом 15px:

<style type="text/css">
#box1{
width: 250px;
height: 100px;
padding: 5px;
background: #008B8B;
color: white;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
</style>

<div id="box1"></div>

Результат в браузере:

Со всеми четырьмя углами понятно. Но что, если Вы хотите закруглить избранные углы?
Это позволяют сделать индивидуальные свойства border-radius:

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft	
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

Давайте попробуем закруглить два противоположных угла:

<style type="text/css">
#tearshape{
 background: #B73A28;
 padding: 3px 5px;
 color: white;
 font-weight: bold;
 text-decoration: none;
-moz-border-radius: 15px 3px 15px 3px;
 -webkit-border-radius: 3px;
 -webkit-border-top-left-radius: 15px;
 -webkit-border-bottom-right-radius: 15px;
 }
</style>
 
<div id="tearshape"></div> 
 

Получается следующий результат:

С применением фоновых изображений

Демо-изображения:

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом вашей страницы.

В приведенном ниже примере, делаем DIV с фоновым изображением, двумя закругленными углами и тенью:

<style type="text/css">
#curve{
 background: url(img/fon.jpg);
 width: 250px;
 height: 120px;
-webkit-box-shadow: 5px 5px 8px #818181;
 -moz-box-shadow: 5px 5px 8px #818181;
 -moz-border-radius-topleft: 25px;
 -moz-border-radius-bottomright: 25px;
 -webkit-border-top-left-radius: 25px;
 -webkit-border-bottom-right-radius: 25px;
 }
</style>
 
<div id="curved"></div>  
 

Получается такой результат:

Похожая картина может получиться, если присвоить идентификатор, например, id="curved1" изображению:

#curved1{
width: 400px;
height: 320px;
borderz: 2px solid navy;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
}

<img id="curved1" src="img/test.jpg" width="400" height="320" alt="изображение">

Результат:

Спасибо за внимание. Всего доброго! Посещайте мой сайт. Пока! L.M.