04.10.2015, 10:02

Как закруглить углы с помощью css свойства border-radius?


Сразу к делу.

Создадим простой блок и присвоим ему класс .ramka:

Код
<div class="ramka">Infoscript.ru - огромная коллекция скриптов</div>


Добавим к нему css стили:

Код
.ramka {padding:25px; /* Задаем отступ содержимого от краев div */
border:1px solid #627786; /* Рисуем рамку толщиной в 1px сплошной линией и цветом 627786*/
width:300px; /* Указываем ширину нашего блока */
text-align:center; /* Выравниваем содержимое блока по центру */
}




Чтобы округлить прямые углы, нам необходимо прописать свойство border-radius к нашему блоку.

Код
.ramka {padding:25px; /* Задаем отступ содержимого от краев div */
border:1px solid #627786; /* Рисуем рамку толщиной в 1px сплошной линией и цветом 627786*/
width:300px; /* Указываем ширину нашего блока */
text-align:center; /* Выравниваем содержимое блока по центру */
border-radius: 5px 15px 5px 15px; /* Закругляем углы */
}


Но сначала, немного о синтаксисе:

Код
border-radius: 5px 15px 5px 15px


В данном случае, все 4 угла будут закруглены на 5px 15px 5px 15px. Т.е., в таком порядке: левый верхний угол, правый верхний угол, правый нижний угол и левый нижний угол. Соответственно, вы можете задать радиус скругления для каждого отдельного угла.



Если же, вам нужен одинаковый радиус для каждого угла, то можно сократить код таким образом:
Код
border-radius: 15px

Теперь все 4 угла будут закруглены на 15px.


Стоит отметить, значение border-radius можно задавать и в %. Например:
Код
border-radius:50%;

В этом случае, мы получим эллипс или круг, если изменим высоту блока.


Источник/Автор: infoscript.ru

Категория: HTML, CSS, JS, JQ | Добавил: antisept (04.10.2015) Просмотров: 1337 | Рейтинг: 5.0/2
Теги: css, border-radius, закруглить, улы
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]