A- A A+
CSS - border-radius

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

.

Закругление блока

Создаем блок в HTML с идентификатором «primer».

CSS - border-radius

Прописываем в CSS для блока рамку, ширину и высоту.

CSS - border-radius

Получился прямоугольник.

CSS - border-radius

Применяем свойство border-radius: 10px. Также можно использовать значение в процентах, при этом отсчет будет вестись относительно ширины блоков.

CSS - border-radius

Проверяем и видим, что все углы стали закругленными.

CSS - border-radius

Задаем радиус для отдельных углов

Чтобы задать радиус для каждого угла свой, применим 4 значения - border-radius: 10px 30px 20px 40px, учитывая следующую очередность:

  • 1 значение - для верхнего левого угла
  • 2 значение - для верхнего правого угла
  • 3 значение - для нижнего правого угла
  • 4 значение - для нижнего левого угла

То есть, начиная с верхнего левого угла по часовой стрелке.

CSS - border-radius

Смотрим результат.

CSS - border-radius

Если указать 2 значения (border-radius: 50px 20px), то первое будет для верхнего левого и нижнего правого, а второе значение определит радиус для верхнего правого и нижнего левого, то есть по диагонали.

CSS - border-radius

При 3-х значениях (border-radius: 50px 10px 20px), первое применится для верхнего левого угла, второе - для верхнего правого и нижнего левого, третье будет отвечать за нижний правый угол.

Устанавливаем радиус для картинки

Весьма эффектно будет смотреться картинка с закругленными углами.

CSS - border-radius

Создаем круглое изображение

Рассмотрим как за несколько секунд сделать круглую картинку. Берем квадратное изображение размером 180px на 180px. Радиус указываем для всех углов - 90px, то есть задаем половину ширины рисунка.

CSS - border-radius

Теперь изображение стало круглым.

CSS - border-radius

На этом заканчиваем знакомство с радиусом. Смело закругляйте уголки своего контента!

 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!