Свойство border-radius

В CSS3 появилось замечательное свойство border-radius. Это свойство позволяет задать для элемента скругление углов. Ранее для этого использовались картинки ( сколько трудов стоило вырезать каждый скругленный уголок из шаблона, а затем «распихивать» их по нужным местам при верстке).

Сейчас достаточно прописать элементу одну короткую строчку и вот вам скругленные углы, причем это свойство позволяет задавать скругления для каждого угла отдельно.

При значении border-radius:50%; квадрат приобретает форму круга, а прямоугольник — овала.
Тот же результат дает применение половинчатых значений высоты и ширины, т.е при стороне квадрата в 100рх border-radius:50px; дает круг.

В случае задания двух параметров через слэш, первый задает радиус по горизонтали, а второй по вертикали.

При отсутствии рамки «скругляется» фоновое изображение (смотри предпоследний пример).
Мы можем добавить в стилях к элементу рамку, тень , рисунок и они будет повторять контур заданного скругления.

Фотогалерея «весна пришла»

Очень громкое название для 4 картинок, но зато овальные и с тенью.

.br_img {
    margin: 10px 25px;
    border:none;
    border-radius: 50%;
    box-shadow:3px 3px 13px #1B5F11;
}  

Самое простое меню

<div class="br_menu">
  <a href="#" class="br_menu-link" title="Главная">Главная</a>
  <a href="#" class="br_menu-link" title="Советы">Советы</a>
  <a href="#" class="br_menu-link" title="Проект">Проект</a>
  <a href="#" class="br_menu-link" title="Контакты">Контакты</a>
</div>
.br_menu{
    width:250px;
    height:  200px;
    background: #D5E9ED;
    border-radius: 10px;
    border: 2px solid #999;
    padding-top: 5px;
    margin: 10px 0;
}    
.br_menu-link{
     width:230px;
     display:block;
     border-radius:30px;
    margin: 7px;
     border:#ccc 4px double;
     font-size:18px;
     color:#888;
     line-height:30px;
     text-shadow:0 1px 0 #fff;
     text-decoration:none;
     text-align:center;
     background:#ddd
}
.br_menu-link:hover{
     border:#bbb 4px double;
     color:#aaa;
     text-decoration:none;
     background:#e6e6e6
 }

Полукруг и четвертушка

Очень простой код и несколько строк в таблице стилей — в результате 2 фигурки. Не нужно никаких изображений, которые «весят», в лучшем случае несколько сот килобайт. А код, пожалуй, и килобайта не наберется. Вот такая разница и экономия.

<div class="circle1_2"></div>
<div class="circle1_4"></div>
.circle1_2{
    background: #6DA3ED;
    height: 50px;
    width: 100px;
    border-radius: 100px 100px 0 0;
 }
.circle1_4 {
    background: #E34;
    height: 100px;
    width: 100px;
    border-radius:0  0 100px  0;
}

Навеяло…

…а может просто «что-то не то с фантазией»

<div class="bg_circle">
    <div class="circle"></div> 
    <div class="circle_1"></div>
    <div class="circle_2"></div>
    <div class="circle_3"></div> 
</div>
.bg_circle {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 10px; 
}
.circle{
    position: absolute;
    left: 0;
    top: 0;
    background: #E4A7E8;
    height: 100px;
    width: 100px;
    border-radius: 100px 0 0 0;
    box-shadow: 3px -3px 6px #999;
 }
.circle_1{
    position: absolute;
    right:-3px;
    top: 0;
    background: #E4A;
    height: 50px;
    width: 50px;
    border-radius:50%;
    margin:45px;
    box-shadow: 3px -3px 6px #999;
 }  
.circle_3{
     position: absolute;
     left: 102px;
     bottom: -4px;
     background: #E34;
     height: 100px;
     width: 100px;
     border-radius:0  0 100px  0;
     box-shadow: 3px -3px 6px #999;
 }
 .circle_2{
     position: absolute;
     right: 100px;
     bottom:-4px;
     background: #0f0;
     height: 100px;
     width: 100px;
     border-radius:0 0 0 100px;
     box-shadow: 3px -3px 6px #999;
 }

И это далеко не все возможности свойства border-radius.