Содержание

border-style | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Значения

Для управления видом границы предоставляется несколько значений свойства border-style. Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
1 пиксел 3 пиксела 5 пикселов 7 пикселов

dotted

dotted

dotted

dotted

dashed

dashed

dashed

dashed

solid

solid

solid

solid

double

double

double

double

groove

groove

groove

groove

ridge

ridge

ridge

ridge

inset

inset

inset

inset

outset

outset

outset

outset

Кроме перечисленных в таблице значений используются следующие ключевые слова.

none
Не отображает границу и ее толщина (border-width) задается нулевой.
hidden
Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.
inherit
Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

Табл. 2. Зависимость результата использования от числа значений
Число значений Результат
1 Стиль границы будет задан для всех сторон элемента.
2 Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3 Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-style</title>
  <style>
   p { 
    border-style: double; /* Стиль линии вокруг параграфа */
    padding: 5px; /* Поля вокруг текста */
   }
  </style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body> 
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-style

Объектная модель

[window.]document.getElementById(«elementID»).style.borderStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

border-bottom | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

border-bottom: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom</title>
  <style>
   .panel {
    background: #ccc; /* Цвет фона */
   } 
   .panel P.content {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    border-top: 2px dotted white; /* Параметры линии вверху */
   }
   .panel P.title {
    font-family: sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
    background: maroon; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom: 2px solid white; /* Параметры линии внизу */
   }
  </style>
 </head>
 <body> 
  <div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
     sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
     aliguam erat volutpat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom

Объектная модель

[window.]document.getElementById(«elementID»).style.borderBottom

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

border-radius — CSS | MDN

border-radius

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

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Это свойство является короткой записью для четырёх свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius иborder-bottom-left-radius.

Скругление применяется ко всему background

, даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip.

Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse имеет значение collapse.

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



border-radius: 10px;


border-radius: 10px 5%;


border-radius: 2px 4px 2px;


border-radius: 1px 0 3px 4px;



border-radius: 10px 5% / 20px;


border-radius: 10px 5% / 20px 30px;


border-radius: 10px 5px 2em / 20px 25px 30%;


border-radius: 10px 5% / 20px 25em 30px 35em;


border-radius: inherit;
border-radius: initial;
border-radius: unset;

Свойство border-radius может быть задано как:

  • одно, два, три или четыре значения <length> или <percentage>. Используется для задания обычного радиуса углов.
  • одна, две, три или четыре пары значений <length> or <percentage>, разделённые «/». Используется для задания эллиптического склугления.

Значения

<length>
Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
<percentage>
Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.

Например:

border-radius: 1em/5em;


border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
border-radius: 4px 3px 6px / 2px 4px;


border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Формальный синтаксис

  border: solid 10px;
  /* угол изгибается в виде 'D' */
  border-radius: 10px 40px 40px 10px;
  border: groove 1em red;
  border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
  border: none;
  border-radius: 40px 10px;
  border: none;
  border-radius: 50%;
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;

BCD tables only load in the browser

border-bottom — CSS | MDN

Сокращённое свойство CSS border-bottom описывает нижнюю границу элемента border. Оно устанавливает значения border-bottom-width, border-bottom-style и border-bottom-color.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что …

border-bottom-style: dotted;
border-bottom: thick green;

… это то же самое, что …

border-bottom-style: dotted;
border-bottom: none thick green;

… и значение border-bottom-style, указанное перед border-bottom игнорируется. Поскольку значением по умолчанию для border-bottom-style является none, то без указания border-style граница не будет показана.

This property is a shorthand for the following CSS properties:

border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

Values

<line-width> || <line-style> || <color>

где
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Applying a bottom border

HTML
<div>
  This box has a border on the bottom side.
</div>
CSS
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
Results

BCD tables only load in the browser

border-image-outset — CSS | MDN

The border-image-outset property describes by what amount the border image area extends beyond the border box.

Portions of the border image that are rendered outside the border box as a result of this property do not cause scrolling to be triggered. These areas also don’t capture or cause mouse events to occur on behalf of the bordered element.


border-image-outset: 1.5;


border-image-outset: 1 1.2;


border-image-outset: 30px 2 45px;


border-image-outset: 7px 12px 14px 5px;

border-image-repeat: inherit;

Значения

When a value is specified as a unitless <number>, that value is multiplied by the corresponding computed border-width to determine the border-image-outset. Negative values are invalid.

sides
Is a <length> or a <number> of the amount by which the border image area extends beyond the border box in all four directions.
horizontal
Is a <length> or a <number> of the amount by which the border image area extends beyond the border box in both horizontal directions (left and right).
vertical
Is a <length> or a <number> of the amount by which the border image area extends beyond the border box in both vertical directions (top and bottom).
top
Is a <length> or a <number> of the amount by which the border image area extends beyond the border box past its top edge.
bottom
Is a <length> or a <number> of the amount by which the border image area extends beyond the border box past its bottom edge.
right
Is a <length> or a <number> of the amount by which the border image area extends beyond the border box past its right edge.
left
Is a <length> or a <number> of the amount by which the border image area extends beyond the border box past its left edge.
inherit
Is a keyword indicating that all four values are inherited from each parent elements’ calculated value.

Формальный синтаксис

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 15.0 15.0 (15.0) 11 15 6
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка ? 15.0 (15.0) Нет ? ?

border css не работает в google chrome?



Я получил следующий код css из учебника, чтобы стилизовать тег hr в firefox.

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-color: #EEEEEE;
  border-width: 2px 0;
  margin: 10px 0;
}

Результат на картинке

Я попытался сделать то же самое для браузера Chrome и добавил следующий код в hr{} :

-webkit-border-bottom-colors: none;
  -webkit-border-image: none;
  -webkit-border-left-colors: none;
  -webkit-border-right-colors: none;
  border-color:none;
  border-color: #EEEEEE -webkit-use-text-color #FFFFFF;

но это не работает в Chrome.

Результат на картинке

Пожалуйста, помогите мне сделать это в Chrome.

html css google-chrome border
Поделиться Источник user2571862     15 января 2014 в 09:59

2 ответа


  • css border-color: -moz-use-text-color не работает в chrome

    у меня есть ниже css для таблицы под и его не работает в chrome и firefox, как ожидалось. вместо этого отображаются более темные цвета границ. Как я могу решить эту проблему? любая помощь будет оценена по достоинству. Заранее спасибо Ниже приведен полный css: TABLE { BORDER-RIGHT: 0px;…

  • css border-color не работает в Chrome

    Код выглядит примерно так: <img src=’/Pic.jpg’/> Это работает в IE 9, но не в Chrome версии 28.0.1500.72. Я не понимаю зеленого цвета границы. Что здесь не так? Есть ли какой-нибудь обходной путь для решения этой…



2

Вы пошли странным путем вокруг вещей, чтобы просто создать границы.

Если вам просто нужны границы, сделайте что-нибудь вроде этого:

hr{
    border-style:solid;
    border-color:#eee;
    border-width:2px;
}

Затем добавьте другие стили,которые вы хотите, например margin 10px; . Я не вижу смысла добавлять специальный код браузера для границы.

Если вам нужны конкретные границы определенных цветов, вы можете использовать это:

border-top:1px solid #f00;
border-left:5px solid #00f;
border-right:2px solid #0f0;
border-bottom:10px solid #f0f;

Поделиться Albzi     15 января 2014 в 10:02



0

Просто используйте ShortCut

попробовать это

border:4px #000 твердое тело;

вам не нужно добавлять -webkit и rest в новые версии браузера

Поделиться Favouronu     15 января 2014 в 10:22


Похожие вопросы:


Почему -moz-border-radius-topright не работает в Google Chrome?

Я хочу использовать закругленную границу на своем сайте. Итак, я использую свойство CSS rounded border следующим образом: -moz-border-radius-topright: 7px; Он хорошо работает в Firefox, но в Google…


border-radius внезапно не работает на Chrome

Изменил ли Chrome правило рендеринга css за одну ночь? Сегодня утром я заметил, что свойство border radius внезапно не интерпретируется в Chrome. Он отлично работает на IE9 & 10. И, насколько я…


CSS hover не работает в Google Chrome при запуске файла с помощью сервера

Функция hover css не работает в google chrome, когда я запускаю свой файл html на сервере wamp. Я попробовал его в internet explorer, тогда он отлично работает. Когда я открываю файл без…


css border-color: -moz-use-text-color не работает в chrome

у меня есть ниже css для таблицы под и его не работает в chrome и firefox, как ожидалось. вместо этого отображаются более темные цвета границ. Как я могу решить эту проблему? любая помощь будет…


css border-color не работает в Chrome

Код выглядит примерно так: <img src=’/Pic.jpg’/> Это работает в IE 9, но не в Chrome версии 28.0.1500.72. Я не понимаю…


css свойство border-bottom не работает в Chrome при использовании полноэкранного режима

Я заметил, что свойство css border-bottom не работает в Chrome. До сих пор я проверял IE 10 и Mozilla. Отлично работает в этих браузерах. Однако он работает в Chrome, когда я не использую полный…


CSS border-radius на действительно маленьких объектах в Chrome Canary

Как достичь CSS радиуса границы на действительно маленьких объектах в Chrome Canary? Эта линия высотой 3px с радиусом границы 2px, увеличенным на 600%, показывает, что происходит не так уж много:…


Google map circle не работает в google Chrome border-radius overflow

Я делаю карту google в форме круга в нижнем колонтитуле. Я смог заставить его работать для Mozilla и IE, но у меня возникли проблемы с Chrome. От исследователя, которого я сделал, проблема…


Border-radius не работает в Chrome

У меня есть карта, созданная с помощью Leaflet, к которой я хочу добавить закругленные углы. Следующий CSS выполняет эту работу в Firefox, но не в Chrome: .leaflet-container { border-radius: 10px;…


Javascript,CSS не работает в Google Chrome Android

Css,Javascript Мой Сайт Не Работает В Google Chrome Android. Я попробовал IE в Android, и он хорошо работает, но google chrome не работает. Мой Сайт: http://obu.vn/Cart.aspx Вся помощь будет оценена…

Стиль границы. HTML, XHTML и CSS на 100%

Читайте также

5.2. Границы фрейма

5.2. Границы фрейма Обращаю ваше внимание на то, что в описанном выше примере каждый фрейм имеет границу (см. рис. 5.1). Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента FRAMESET, позволяющих настраивать

Границы

Границы Для задания границ вы можете использовать следующие свойства: border, border-collapse и border-spacing.Свойство border задает стиль границы и размер. Стили границ будут подробно рассмотрены в следующих разделах. Размер границы задается целым числом и с указанием единицы

9.7. Границы

9.7. Границы Для всех элементов страницы вы можете задать границы, а также установить их ширину, цвет и стиль. Начнем изучение границ со свойства

Ширина границы

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

Цвет границы

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

Границы элементов

Границы элементов borderЗадает все свойства границ элемента страницы в один прием.Заменяет атрибуты border-color, border-style и border-width. Значения этих атрибутов могут располагаться в любом порядке.border: [{border-color}] [{border-style}] [{border-width}];Значение по умолчанию medium none. Поддерживается IE начиная

Заливка и границы текста

Заливка и границы текста Чтобы залить цветом абзац, в котором установлен курсор, или выделенный фрагмент текста, используйте кнопку Заливка которая находится в группе Абзац вкладки Главная на ленте. Для выбора цвета нажмите стрелку справа от кнопки и в появившемся

3.1.4. Внутренние границы

3.1.4. Внутренние границы В Unix действует предположение о том, что программист знает лучше (чем система). Система не остановит пользователя и не потребует какого-либо подтверждения при выполнении опасных действий с данными, таких как ввод команды rm -rf *. С другой стороны, Unix

3.1.4. Внутренние границы

3.1.4. Внутренние границы В Unix действует предположение о том, что программист знает лучше (чем система). Система не остановит пользователя и не потребует какого-либо подтверждения при выполнении опасных действий с данными, таких как ввод команды rm -rf *. С другой стороны, Unix

Границы и заливка

Границы и заливка По умолчанию ячейки не имеют видимых границ: вы видите тонкие серые линии, разграничивающие ячейки, но эти линии не отображаются при печати документа. Иногда же требуется, чтобы напечатанная таблица имела четкие границы (рис. 3.10). Рис. 3.10. Пример

Границы

Границы Рассмотрим, как можно создать видимые границы ячейки, которые будут отображаться при печати.Прежде всего напомню, что перед какими-либо преобразованиями ячейки (или диапазон) должны быть выделены.Обратите внимание на кнопку Границы, расположенную в группе Шрифт

Границы абзацев и выравнивание

Границы абзацев и выравнивание Как вы помните, Word позволяет выбрать несколько способов выравнивания границ текста: по левому или правому краю, по обоим краям (т. е. по ширине) или по центру. В большинстве случаев для того, чтобы ваш текст выглядел аккуратно и приятно для

Границы и заливка. Автоформат

Границы и заливка. Автоформат Для дальнейшего оформления таблицы вы можете выделять другим цветом ее различные элементы – ячейки, строки или столбцы. Для этого предназначен инструмент Заливка. Чтобы изменить цвет и тип заливки, воспользуйтесь кнопкой Цвет заливки

Таблицы и границы

Таблицы и границы ТаблицаВсе мы интуитивно понимаем, о чем идет речь, когда произносится слово «таблица», но будет лучше, если мы все-таки договоримся о терминах и будем их употреблять в одинаковом смысле.Под таблицей понимается набор строк и столбцов, пересечения

Границы и заливка

Границы и заливка Для применения к выделенному фрагменту границ или заливки можно использовать следующие кнопки в группе Абзац вкладки Главная. Заливка. Позволяет выполнить заливку выбранным фоном. Щелчок на кнопке сразу же применяет текущий цвет заливки для текущего

css — Что я должен использовать: «граница: нет» или «граница: 0»?

(примечание: этот ответ был обновлен 01.08.2014, чтобы сделать его более подробным, точным и добавить живую демонстрацию)

Расширение коротких свойств

Согласно спецификации W3C CSS2.1 ( «Пропущенные значения устанавливаются на свои начальные значения» ) следующие свойства эквивалентны:

  граница: скрытая; стиль границы: скрытый;
                   ширина границы: средний;
                   border-color: <то же, что свойство 'color'>

граница: нет; стиль границы: нет;
                   ширина границы: средний;
                   border-color: <то же, что свойство 'color'>

граница: 0; стиль границы: нет;
                   ширина границы: 0;
                   border-color: <то же, что свойство 'color'>
  

Если эти правила являются наиболее конкретными, применяемыми к границам элемента, то границы не будут отображаться либо из-за нулевой ширины, либо из-за стиля , скрытого /, нет .Итак, на первый взгляд, эти три правила выглядят эквивалентными. Однако в сочетании с другими правилами они ведут себя по-разному.

Границы в контексте таблицы в модели сворачивающейся границы

Когда таблица визуализируется с использованием border-collapse: collapse , тогда каждая визуализированная граница разделяется между несколькими элементами (внутренние границы используются совместно с соседними ячейками; внешние границы используются совместно между ячейками и самой таблицей; но также и строки группы, столбцы и группы столбцов имеют общие границы).В спецификации определены некоторые правила разрешения пограничных конфликтов:

  1. Границы со стилем границы из скрытые имеют приоритет над всеми другими конфликтующими границами. […]

  2. Границы со стилем нет имеют самый низкий приоритет. […]

  3. Если ни один из стилей не скрыт и хотя бы один из них не нет , то узкие границы отбрасываются в пользу более широких.[…]

  4. Если стили границ отличаются только цветом, […]

Итак, в контексте таблицы border: hidden (или border-style: hidden ) будет иметь наивысший приоритет и сделает общую границу скрытой, несмотря ни на что.

На другом конце приоритета, граница : нет (или стиль границы : нет ) имеет самый низкий приоритет, за которым следует граница нулевой ширины (поскольку это самая узкая граница).Это означает, что вычисленное значение из border-style: none и вычисленное значение из border-width: 0 по существу одинаковы.

Каскадные правила и наследование

Поскольку none и 0 влияют на разные свойства ( border-style и border-width ), они будут вести себя по-разному, когда более конкретное правило определяет только стиль или только ширину. См. Пример ответа Криса.

Хотите увидеть все эти случаи на одной странице? Откройте живую демонстрацию !

граница | CSS-уловки

Свойство border — это сокращенный синтаксис в CSS, который принимает несколько значений для рисования линии вокруг элемента, к которому оно применяется.

  .box {
  граница: сплошной красный цвет 3px;
  высота: 200 пикселей;
  ширина: 200 пикселей;
}  

Значения

Свойство border принимает одно или несколько из следующих значений в комбинации:

  border: <ширина-границы> || <стиль границы> || <цвет>  
  • border-width : определяет толщину границы.
    • : числовое значение, измеренное в единицах px , em , rem , vh и vw .
    • тонкий : эквивалент 1px
    • средний : эквивалент 3px
    • толщиной : эквивалент 5px
  • border-style : определяет тип линии, нарисованной вокруг элемента, включая:
    • сплошная : сплошная непрерывная линия.
    • нет (по умолчанию): линия не рисуется.
    • скрыто : линия нарисована, но не видна. это может быть удобно для добавления небольшой дополнительной ширины к элементу без отображения границы.
    • пунктирная : линия, состоящая из тире.
    • пунктирная : линия, состоящая из точек.
    • двойной : вокруг элемента нарисованы две линии.
    • канавка : добавляет фаску на основе значения цвета таким образом, чтобы элемент выглядел вдавленным в документ.
    • гребень : Подобен канавке , но меняет значения цвета на противоположные таким образом, чтобы элемент выглядел приподнятым.
    • вставка : Добавляет разделенный тон к линии, из-за чего элемент выглядит слегка вдавленным.
    • начало : аналогично вставке , но меняет цвета так, чтобы элемент выглядел слегка приподнятым.
  • color : определяет цвет границы и принимает значения , , , , , <имя-цвета> , текущий цвет и <устаревший-системный-цвет>

Уф, это много ценностей для одной маленькой собственности! Вот демонстрация, демонстрирующая различия между всеми этими значениями стиля:

См. CSS-границу Pen от Джеффа Грэма (@geoffgraham) на CodePen.

Поддержка браузера

Вы можете рассчитывать на отличную поддержку свойства border во всех браузерах.

Хром Safari Firefox Opera IE Android iOS
Любая любой любой 3.5+ 4+ любой любой

Сопутствующие объекты

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

  • border-collapse : Задает интервал между границами на элементе .
  • border-image : Позволяет использовать изображение для рисования границы вместо сплошного цвета.
  • border-radius : управление закругленными углами.
  • Дополнительная информация

    Удалить границу из IFrame с помощью CSS

    Удалить границу из IFrame с помощью CSS

    Iframe используется для отображения веб-страницы на веб-странице.Удалить границу из тега iframe на веб-странице можно с помощью одного из свойств CSS тега iframe, называемого frameBorder , и установить для него значение «0».

    Синтаксис:

     frameBorder = "значение"; 

    Примечание: В свойстве frameBorder буква B должна быть заглавной, иначе браузер не распознает ее. Свойство frameBorder принимает значения 0 и 1, где 0 используется для отключения границы, а 1 используется для включения свойства границы.По умолчанию установлено значение 1.

    Пример 1:

    < HTML >

    < Головка >

    < заголовок > Отключить границу iframe заголовок >

    < стиль >

    iframe {

    высота: 200 пикселей;

    ширина: 400 пикселей;

    цвет фона: светло-зеленый;

    }

    h2 {

    цвет: зеленый;

    }

    корпус {

    выравнивание текста: по центру;

    }

    стиль >

    Головка >

    < корпус >

    < h2 > GeeksforGeeks h2 >

    < h3 > свойство границы iframe h3 >

    < iframe src = # frameBorder = "0" > iframe >

    корпус >

    html >

    Выход:


    Пример 2:

    < HTML >

    < Головка >

    < заголовок > Отключить границу iframe заголовок >

    < стиль >

    iframe {

    высота: 200 пикселей;

    ширина: 400 пикселей;

    цвет фона: зеленый;

    }

    h2 {

    цвет: зеленый;

    }

    корпус {

    выравнивание текста: по центру;

    }

    стиль >

    Головка >

    < корпус >

    < h2 > GeeksforGeeks h2 >

    < h3 > свойство границы iframe h3 >

    < iframe src = # frameBorder = "1" > iframe >

    корпус >

    html >

    Выход:

    border-style - справочник CSS

    Закрыть

    CSS Ссылка бесплатно и всегда будет!

    Добавьте нас в белый список блокировщика рекламы.

    Спасибо!

    Бесплатное визуальное руководство по CSS Создано @jgthms

    Поделиться Меню

    Новинка! Моя 44-страничная электронная книга " CSS за 44 минуты " вышла! 😃

    Получить сейчас → Постоянная ссылка доля MDN

    Определяет стиль границ элемента.

    ]]]]]]]]>]]]]]]]>]]]]>]]>

    по умолчанию стиль границы: нет;

    Удаляет границы элемента.

    ]]]]]]]]>]]]]]]]>]]]]>]]>

    border-style: пунктирная;

    Превращает границу в последовательность точек.

    ]]]]]]]]>]]]]]]]>]]]]>]]>

    стиль границы: пунктирная;

    Превращает границу в последовательность тире.

    ]]]]]]]]>]]]]]]]>]]]]>]]>

    стиль границы: сплошной;

    Превращает границу в сплошную линию.

    ]]]]]]]]>]]]]]]]>]]]]>]]>

    стиль границы: двойной;

    Разделяет границу на две строки.

    ]]]]]]]]>]]]]]]]>]]]]>]]>

    бордюр: паз;

    Задает стиль вставки границ.

    ]]]]]]]]>]]]]]]]>]]]]>]]> ]]]]]]]]>]]]]]]]>]]]]>]]>

    CSS Свойство: border-bottom-style | HTML Dog

    Свойство CSS: border-bottom-style | HTML Собака

    Вы здесь: Главная → Ссылки → CSS → Свойства →

    Стиль нижней границы поля.

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

    Возможные значения

    Значение Описание
    нет

    Без рамки.

    сплошной

    Сплошная линия.

    с точками

    Серии точек.

    пунктир

    Ряд тире.

    двойной

    Две сплошные линии.

    паз

    Изображение резного паза. Напротив гребня .

    гребень

    Изображение рельефного гребня. Напротив проточка .

    вставка

    Изображение углубления на вставке.Напротив , нач. .

    outset

    Изображение начального выдавливания. Напротив вставка .

    скрыто

    Используется с таблицами. То же, что и , нет , за исключением конфликтующих границ.

    наследство
    начальное
    снятое

    Ссылка на нас! Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.

    Пример

     
    .trout {стиль нижней границы: нет; }
      

    Поддержка браузера

    Поддерживается всеми современными браузерами.

    Связанные страницы

    Все свойства CSS

    Учебники

    Примеры

    Главное меню

    Дополнительное меню

    ↑ Вверх

    Как удалить и стилизовать границу вокруг полей ввода текста в Google Chrome

    1. Фрагменты
    2. CSS
    3. Как удалить и стилизовать границу вокруг полей ввода текста в Google Chrome

    В Google Chrome , поля формы, такие как , Поле выбора: <выбор> Попробуйте сами »

    Спасибо за ваш отзыв!

    Считаете ли вы это полезным? Да Нет


    Статьи по теме

    The CSS Borders Tutorial

    Всего за несколько недель до запуска 2021 JavaScript Full-Stack Bootcamp .
    Записывайтесь в лист ожидания!


    Граница - это тонкий слой между заполнением и полем. Редактируя границу, вы можете заставить элементы рисовать свой периметр на экране.

    Вы можете работать с границами, используя эти свойства:

    • с бордюром
    • цвет рамки
    • ширина границы

    Свойство border может использоваться как сокращение для всех этих свойств.

    border-radius используется для создания закругленных углов.

    У вас также есть возможность использовать изображения в качестве границ, возможность, которую дает вам border-image и его особые отдельные свойства:

    • источник изображения границы
    • фрагмент изображения границы
    • ширина границы изображения
    • граница-изображение-исход
    • Повтор изображения границы

    Начнем с с бордюром .

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

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

    • пунктирная
    • штриховая
    • цельный
    • двойной
    • паз
    • гребень
    • вставка
    • начало
    • нет
    • скрыто

    Проверьте это Codepen на живом примере

    По умолчанию для стиля используется none , поэтому, чтобы граница вообще отображалась, вам нужно изменить ее на что-то другое. solid - в большинстве случаев хороший выбор.

    Вы можете установить разные стили для каждой кромки, используя свойства

    • с бордюром
    • граница правая
    • с окантовкой снизу
    • рамка-левая

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

      p {
      стиль границы: сплошной пунктирный сплошной пунктирный;
    }  

    Ширина бордюра

    border-width используется для установки ширины границы.

    Вы можете использовать одно из предопределенных значений:

    • тонкий
    • средний (значение по умолчанию)
    • толщиной

    или выразить значение в пикселях, em или rem или любое другое допустимое значение длины.

    Пример:

    Вы можете установить ширину каждого края (верхний правый нижний левый) отдельно, используя 4 значения:

      p {
      ширина границы: 2px 1px 2px 1px;
    }  

    или вы можете использовать определенные свойства края border-top-width , border-right-width , border-bottom-width , border-left-width .

    Цвет бордюра

    border-color используется для установки цвета границы.

    Если цвет не задан, рамка по умолчанию окрашивается в цвет текста в элементе.

    Вы можете передать любое допустимое значение цвета в border-color .

    Пример:

      p {
      цвет границы: желтый;
    }  

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

      p {
      цвет границы: черный красный желтый синий;
    }  

    , или вы можете использовать определенные свойства края border-top-color , border-right-color , border-bottom-color , border-left-color .

    Граница стенографической собственности

    Эти 3 упомянутых свойства, border-width , border-style и border-color могут быть установлены с использованием сокращенного свойства border .

    Пример:

      p {
      граница: сплошной черный 2px;
    }  

    Вы также можете использовать свойства края border-top , border-right , border-bottom , border-left .

    Пример:

      p {
      border-left: сплошной черный цвет 2 пикселя;
      border-right: красный пунктир 3px;
    }  

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

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

    использование:

      p {
      радиус границы: 3 пикселя;
    }  

    Вы также можете использовать свойства края border-top-left-radius , border-top-right-radius , border-bottom-left-radius , border-bottom-right-radius .

    Использование изображений в качестве границ

    Одна очень крутая вещь с рамками - это возможность использовать изображения для их стилизации.Это позволяет вам очень творчески подходить к бордюрам.

    У нас 5 объектов:

    • источник изображения границы
    • фрагмент изображения границы
    • ширина границы изображения
    • граница-изображение-исход
    • Повтор изображения границы

    и сокращенное изображение border-image .

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

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