HTML/CSS: Рамки

• Примеры границ

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

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

• border-width — ширина границы
• border-style — стиль границы
• border-color — цвет границы

Можно указывать несколько свойств, а можно всё объединить в рамках свойства border. Такой вариант встречается чаще всего и выглядит он так:

.element {
  border: 1px solid #ccc;
}

где:

• 1px — ширина границы
• solid — стиль границы
• #ccc — цвет границы

Со значениями в пикселях и hex-цветом мы уже сталкивались в рамках курса, а вот стилей границ в CSS восемь:

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

и есть значение none, которое «удалит» границу, так как при значении border-style: none браузеры игнорируют другие свойства и удаляют границу

Примеры границ

<style>
  .border-dotted {
    border: 1px dotted #000;
  }
</style>

<div class="border-dotted">
  Блок с пунктирной рамкой и чёрным цветом
</div>

Задание

Добавьте в редактор <div> с классом border-bold и установите сплошную границу толщиной 5 пикселей. Цвет рамки #2196F3. Стили запишите в теге <style>

Полезное

• Попробуйте разные стили границ в редакторе