Войти
Регистрация

Рамки и углы у блоков в CSS

Рамки и углы у блоков в CSS

Здравствуйте, дорогие друзья!

В этой статье я постараюсь максимально подробно рассказать Вам про рамки блоков, а также радиус закругления их границ.

Это тоже одно из не менее важных свойств блочных элементов основ CSS.

С помощью рамок можно не только обвести границу блока для его выделения, но и обрамить картинку.

Для того, чтобы задать рамку мы будем использовать 2 свойства.

1. Свойство border

Базовый способ задать рамку следующий:

div {
   border: 2px solid red;
}

Здесь мы блоку задали толщину рамки 2 пикселя, стиль solid (сплошной) и красный цвет (red). Здесь все просто.

Есть еще несколько стилей рамки:

dashed
dotted
double
groove
ridge
inset
outset

Применив общее свойство border мы можем задать толщину, цвет и стиль для всех сторон рамки. Как быть, если нужно сделать разные границы по цвету, толщине и стилю?

border-style

Данное свойство, как Вы наверное догадались, задает стиль рамок. Указав 4 значения, мы добьемся разных стилей сторон:

div {
   border-style: dotted dashed double ridge;
}

border-width

Данное свойство задает толщину каждой границы через 4 значения:

div {
   border-width: 3px 5px 8px 11px;
}

border-color

Свойство задает цвет для каждой границы, указав 4 значения мы получим:

div {
   border-color: red blue green orange;
}

Также можно использовать более короткую запись, чтобы задать сразу толщину, стиль и цвет рамки для каждой из сторон:

  • border-top - верхняя граница рамки.
  • border-right - правая граница рамки.
  • border-bottom - нижняя граница рамки.
  • border-left - левая граница рамки.

Например, зададим сразу толщину, стиль и цвет для верхней рамки:

div {
   border-top: 2px solid red;
}

2. Outline

Данный способ отличается от предыдущего лишь тем, что эта рамка не меняет размер блока, как border, она накладывается снаружи и может случайно наложиться на соседние элементы, если отступы сделаете не большие между ними.

Данная рамка задается с помощью свойства outline и принимает 3 значения - толщина, стиль и цвет рамки.

div {
   outline: 2px solid red;
}

Точно также можно задать стиль, цвет и толщину для каждой границы рамки, указав 4 значения:

  • outline-width - толщина границ (например: 2px 5px 8px 11px)
  • outline-style - стиль границ (например: dashed dotted ridge double)
  • outline-color - цвет границ (например: red blue green orange)

Радиус углов

Радиус задается с помощью свойства border-radius. Также можно указать в свойстве размер закругления как для всех границ, так и для каждой:

div {
   border-radius: 5px;
/* или */
   border-radius: 9px 14px 5px 25px;
}

Последний пример абсолютно идентичен следующей записи:

div {
   border-top-left-radius: 9px;
   border-top-right-radius: 14px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 25px;
}

Мы увидим следующее:

Зачем тогда нужны такие записи, если можно использовать короткую? А вот для чего! Можно задать одному углу 2 степени закругления: нижнее и верхнее:

div {
   border-top-left-radius: 15px 25px;
}

Видим, как верхний левый угол закруглен по-разному:

Такой метод чаще применяется для создания фигур в CSS.

Помимо блоков, рамку и радиус углов можно задавать и картинкам, кнопкам и т.д.

И вот Вам задание для разминки:

  • 1. Задайте блоку верхнюю границу 2px, синего цвета и стиль двойной
  • 2. Задайте блоку левую границу 6px, оранжевого цвета и стиль объемный
  • 3. Задайте блоку правую границу 9px, зеленого цвета и стиль точечный
  • 4. Задайте блоку нижнюю границу 13px, оливкового цвета и стиль сплошной
  • 5. Задайте радиус углов: нижний левый 5px, верхний правый 11px, нижний правый без изменений, верхний левый 3px.

Использовать краткую запись для стиля каждой границы нельзя. Используйте border-style и т.д. Удачной тренировки Вам.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?