✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по CSS, CSS3 ›› Закругленные углы у блоков в CSS3

Закругленные углы у блоков в CSS3

Технология CSS3 позволяет легко и просто создавать закругленные углы у блоков. Это делается с помощью свойства border-radius. Таким образом, закругленные углы можно делать для любых блочных элементов на веб-странице. Итак, давайте рассмотрим примеры.

Пример 1:

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
  border-radius: 10px;
}

Пример 2:

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
  border-radius: 10px 20px 30px 40px;
}

Пример 3:

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
  border-radius: 50%;
}

Результаты представлены на рисунке:

Закругленные углы у блоков в CSS3

Как видно, в первом примере мы скруглили углы блока на 10px. На втором примере мы задали разные значения border-radius для каждого из углов блока. И, наконец, в третьем примере мы сделали круг, задав всем углам блока радиус скругления 50%. Вот по такому принципу делаются закругленные углы у блоков в CSS3. Успехов!

Поделитесь ссылкой! Подпишитесь на обновления, чтобы получать новые публикации!

Оставить комментарий

Siteblogger.ru – проект, охватывающий достаточно широкий круг вопросов: создание сайтов и блогов на WordPress, поисковые системы, поисковая оптимизация и продвижение сайтов, способы заработка в сети, эффективные инструменты работы в Интернете и другое. Кроме того, мы оказываем услуги создания сайтов и блогов на WordPress с последующим их продвижением, а также занимаемся настройкой и ведением контекстной рекламы Яндекс.Директ и Google Adwords. По поводу сотрудничества просьба обращаться через контакты, все заявки и предложения будут обязательно рассмотрены. При использовании материалов данного сайта, пожалуйста, указывайте прямую индексируемую ссылку на Siteblogger.ru.

«Как создать и продвинуть свой сайт»

2011–2016 © Siteblogger.ru
Рейтинг@Mail.ru