CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element’s border.
I have borders on all sides.
I have a red bottom border.
I have a blue left border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
- dotted — Defines a dotted border
- dashed — Defines a dashed border
- solid — Defines a solid border
- double — Defines a double border
- groove — Defines a 3D grooved border. The effect depends on the border-color value
- ridge — Defines a 3D ridged border. The effect depends on the border-color value
- inset — Defines a 3D inset border. The effect depends on the border-color value
- outset — Defines a 3D outset border. The effect depends on the border-color value
- none — Defines no border
- hidden — Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
Example
Demonstration of the different border styles:
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!
Можно ли задать высоту для бордера?
можно ли как-то задать размеры для свойств border, например, чтобы bordser-left был 10px или таких свойств нет и нужно будет придумывать другие пути как это сделать?
Подойдите к вопросу иначе. Рамка всегда есть, но ее не видно.
При наведении, рамка меняет цвет и ее видно.
Добавив transition: border-color 0.3s; сделаем смену цвета плавной.
tosster22, вам нужно сразу добавить прозрачный бордер, а при наведении менять цвет, что бы не прыгал блок. Еще вариант использовать box-shadow
https://codepen.io/michelre/pen/EoPMGv
проблема в том, что нужно height для бордера. Суть такая, есть ссылка и у нее есть padding 20px. Нужно padding оставить такой же, а при наведении добавить рамку которая в 10px
tosster22, что значит высота? У бордера есть «толщина» или имеется в виду размер этого бордера? Так он описывает элемент.
tosster22, тогда бордер здесь не поможет, можно, например сделать псевдоэлемент с нужной вам высотой, позиционировать его относительно элемента и показывать при наведении на элемент
Войдите, чтобы написать ответ
Navbar занимает весь body?
border
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .
Синтаксис
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.
Рис. 2. Применение свойства border
Объектная модель
[window.]document.getElementById(» elementID «).style.borderБраузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .