Как сделать границу в css

Границы в CSS

Каждый элемент имеет границу. По умолчанию она невидима. Оформление для границы задается с помощью свойства border .

Свойство border является универсальным, позволяющим одновременно указать значения всех свойств, связанных с оформлением границы элемента: border-width , border-style и border-color .

Значения вышеупомянутых свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию. Только свойству border-style необходимо присвоить какое-либо значение кроме none , чтобы свойство border-width действовало.

Свойства border-top , border-right , border-bottom и border-left аналогичны свойству border , но позволяют применить стилевое оформление лишь к верхней, правой, нижней и левой границе элемента соответственно.

Свойства применимы ко всем элементам.

Толщина границы

Свойство border-width задает толщину границы элемента для всех его сторон или индивидуально для каждой.

Толщина границы задается в пикселях (указывается целое положительное число) или в других единицах принятых в CSS (подробнее здесь. ). Также ширину границы можно указать при помощи ключевых слов thin , medium и thick , устанавливающих толщину, равную 2 , 4 и 6 пикселям соответственно.

С помощью свойств border-top-width , border-right-width , border-bottom-width и border-left-width устанавливают толщину границы для каждой из соответствующих сторон элемента индивидуально.

И еще раз напомним: чтобы свойство border-width действовало, необходимо свойству border-style присвоить любое значение, кроме none .

Свойства применимы ко всем элементам.

Стиль границы

Свойство border-style устанавливает стиль границы элемента для всех его сторон или индивидуально для каждой.

Стиль задается с помощью ключевых слов none , solid , double , dashed , dotted , groove , ridge , inset и outset , которые устанавливают тип линии.

Минимальная ширина для границы в виде двойной сплошной линии (значение double ) составляет 3 пикселя . Иначе она будет отображаться сплошной.

С помощью свойств border-top-style , border-right-style , border-bottom-style и border-left-style задают стиль границы для каждой из соответствующих сторон элемента индивидуально.

Свойства применимы ко всем элементам.

Цвет границы

Свойство border-color задает цвет границы элемента для всех его сторон или индивидуально для каждой.

Цвет задается одним из способов, принятых в CSS (подробнее здесь. )

С помощью свойств border-top-color , border-right-color , border-bottom-color и border-left-color устанавливают цвет границы для каждой из соответствующих сторон элемента индивидуально.

Свойства применимы ко всем элементам.

От 1 до 4 значений

При задании стиля границы для свойств border-width , border-style и border-color допускается указывать от 1 до 4 значений, разделяя их пробелом. Результат зависит от количества и приведен в таблице:

Количество значений Результат
1 Граница элемента для всех его сторон имеет одинаковое оформление.
2 Первое значение задает оформление для верхней и нижней границы, второе для боковых границ элемента.
3 Первое значение задает оформление для верхней границы, второе для боковых, а третье значение для нижней границы элемента.
4 Значения поочередно устанавливают оформление границы для верхней, правой, нижней и левой стороны элемента.

Внешняя граница. Свойство outline

Внешняя граница в отличие от границы, задаваемой свойством border , не влияет на положение элемента.

Стилевое оформление для внешней границы задается с помощью свойства outline .

Свойство outline , по аналогии со свойством border , является универсальным, позволяющим одновременно указать значения всех свойств, связанных с оформлением внешней границы элемента: outline-width , outline-style и outline-color .

Значения свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию. Только свойству outline-style необходимо присвоить какое-либо значение кроме none , чтобы свойство outline-width действовало.

Свойства применимы ко всем элементам.

Значения у свойств outline-width , outline-style и outline-color те же, что и у свойств border-width , border-style и border-color соответственно.

<p style="border-color : #0099CC ; border-style : double ; border-width : 10px ; outline : #CC0000 double 10px ; border-bottom : #33CC66 solid 5px ; padding : 10px ; ">
Оформили обе границы абзаца. Для нижней внутренней границы стиль задан индивидуально.
</p>

Оформили обе границы абзаца. Для нижней внутренней границы стиль задан индивидуально.

W3.CSS Границы

Красная граница, которая становится зеленой при наведении.

W3.CSS Классы границ

W3.CSS предоставляет следующие классы границ:

Класс Определяет
w3-border Добавляет границы (сверху, справа, снизу, слева) к элементу
w3-border-top Добавляет верхнюю границу к элементу
w3-border-right Добавляет правую границу к элементу
w3-border-bottom Добавляет нижнюю границу к элементу
w3-border-left Добавляет левую границу к элементу
w3-border-0 Удаляет все границы
w3-border-color Отображение границы указанным цветом (например, красным, синим и т.д.)
w3-hover-border-color Добавляет цвет границы при наведении
w3-bottombar Добавляет толстую нижнюю границу к элементу
w3-leftbar Добавляет толстую левую границу к элементу
w3-rightbar Добавляет толстую правую границу к элементу
w3-topbar Добавляет толстую верхнюю границу к элементу

Добавление границ

Классы w3-border используются для добавления границ к любому элементу HTML:

Границы CSS

Здравствуйте! От внутренних отсутпов в CSS плавно переходим к границам элемента. Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

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

Границы CSS

Свойство border-width может принимать следующие типы значений:

  • Значения в единицах измерения, таких как em, px или cm
  • Одно из константных значений: thin (тонкая граница &#8212; 1px), medium (средняя по ширине &#8212; 3px), thick (толстая &#8212; 5px)

Свойство border-color в качестве значения принимает цвет CSS:

Свойство border-style оформляет тип линии границы и может принимать одно из следующих значений:

  • none: граница отсутствует
  • solid: граница в виде обычной линии
  • dashed: штриховая линия
  • dotted: линия в виде последовательности точек
  • double: граница в виде двух параллельных линий
  • groove: граница имеет трехмерный эффект
  • inset: граница как бы вдавливается во внутрь
  • outset: аналогично inset, только граница как бы выступает наружу
  • ridge: граница также реализует трехмерный эффект

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

Свойство border

Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство &#8212; border:

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

Их использование аналогично:

Радиус границы

Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

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

border-radius

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

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

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y &#8212; 20 пикселей.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *