Свойство border в CSS — это один из ключевых инструментов для стилизации элементов на веб-страницах. Благодаря ему разработчики могут задавать внешние рамки для блоков, изображений, текста и других элементов, что позволяет не только улучшить визуальную привлекательность, но и подчеркнуть структуру контента. В данной статье мы подробно рассмотрим, как использовать border, какие типы границ существуют и как можно комбинировать свойства для достижения различных визуальных эффектов. Свойство border в CSS позволяет задавать рамки вокруг элементов...

Элементы в CSS представляют собой набор слоёв: ширина и высота самого элемента (width и height), поля элемента (padding), граница элемента (border) и отступы (margin). Подробнее о блочной модели стоит почитать здесь. Долгое время в CSS изменение padding приводило к изменению width у элементов, из-за чего два одинаковых по ширине элемента с разными по ширине полями, в реальности имели разную ширину. Пример ниже демонстрирует этот недуг: https://codepen.io/artik-man/pen/KKPMpdm На помощь в борьбе с этим нелогичным, казалось бы, поведением пришел box-sizing...