Cоздание закругленных углов на сайтах, border-radius в CSS

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

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

Закругленные все углы. Радиус 10 пикселей.

Прямоугольники с закругленными углами на основе CSS. Способы закругления углов прямоугольника. Cоздание закругленных углов на сайтах!
.class_1 {            
border:1px solid #999999;
border-radius:10px;  
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
padding:15px;
}

Верхний левый и нижний правый. Радиус 15 пикселей.

Прямоугольники с закругленными углами на основе CSS. Способы закругления углов прямоугольника... Закругленные углы весьма модны в современном Web-дизайне.
.class_2 {              
border:1px solid #999999;
border-radius:15px 0 15px 0;
-moz-border-radius:15px 0 15px 0;
-webkit-border-radius:15px 0 15px 0;
-khtml-border-radius:15px 0 15px 0;
padding:15px;
}

Верхние левый и правый. Радиус 20 пикселей.

Наш очередной урок CSS посвящен созданию блока с качественными закруглёнными углами без использования картинок.
.class_3 {              
border:1px solid #999999;
border-radius:20px 20px 0 0;
-moz-border-radius:20px 20px 0 0;
-webkit-border-radius:20px 20px 0 0;
-khtml-border-radius:20px 20px 0 0;
padding:15px;
}

Только верхний левый. Радиус 25 пикселей.

Сделать закругленные уголки у блока без использования графики и скриптов, да еще чтобы и во всех браузерах работало? Запросто!
.class_4 {              
border:1px solid #999999;
border-radius:25px 0 0 0;
-moz-border-radius:25px 0 0 0;
-webkit-border-radius:25px 0 0 0;
-khtml-border-radius:25px 0 0 0;
padding:15px;
}

Комментарии

Нашел удобный сервис который генерирует код CSS - http://www.css3.me. CSS3-генератор предоставляет "border-radius" для создания закругленных углов и "box-shadow» для создания эффекта тени.

Веб студия Профвебсайт

Мы предлагаем оригинальное качество, привлекательный и функциональный дизайн.

633010 НСО г.Бердск ул. Ленина, 89/1
Телефон: 8 (383) 310-51-83
Телефон: +7 953 767-26-02
E-mail: profwebsait@mail.ru

Следуйте за нами:

Новые комментарии

Галерея шаблонов

Главная страница
Страница блога
Страница портфолио
Публикации с комментариями
Главная страница
Страница блога
Back to Top