Содержание

Свойство border | Учебные курсы

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

border: 2px solid #0069b5; /* Параметры рамки */
border-left: none; /* Убираем линию слева */
border-right: none; /* Убираем линию справа */

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

Сама рамка идёт после содержимого элемента и пустого пространства, создаваемого padding (рис. 1). Если свойство padding не задано, то рамка начинается сразу вокруг содержимого.

Рис. 1. Положение рамки в элементе

В примере 1 показано добавление линии слева от цитаты с помощью свойства border-left.

Пример 1. Использование border-left

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Линия</title> <style> blockquote { background: #d2f7ff; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ border-left: 2px solid #0069b5; /* Параметры линии */ } </style> </head> <body> <blockquote> Фьюжн начинает форшлаг. </blockquote> </body> </html>

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

Рис. 2. <blockquote> с линией

Расстояние от рамки до содержимого регулируется с помощью свойства padding. Сами линии отображаются поверх цветного фона, что становится заметно, когда добавляется пунктирная или точечная линия. В примере 2 показано добавление такой линии.

Пример 2. Точечный пунктир

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Линия</title> <style> blockquote { background: #d2f7ff; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ border: 5px dotted #0069b5; /* Параметры рамки */ } </style> </head> <body> <blockquote> Фьюжн начинает форшлаг. </blockquote> </body> </html>

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

Рис. 3. Линия поверх фона

Поведение фона в подобных случаях можно изменить с помощью свойства background-clip. К примеру, значение padding-box будет выводить фон внутри границ, а content-box внутри содержимого. Это позволяет создавать интересной формы блоки, если задать единый цвет рамки и фона и воспользоваться свойством background-clip (пример 3).

Пример 3. Использование background-clip

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Линия</title> <style> blockquote { background: #0069b5; /* Цвет фона */ color: #fff; /* Белый цвет текста */ padding: 10px; /* Поля вокруг текста */ border: 5px dashed #0069b5; /* Параметры рамки */ background-clip: padding-box; /* Фон внутри рамки */ } </style> </head> <body> <blockquote> Фьюжн начинает форшлаг. </blockquote> </body> </html>

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

Рис. 4. Пунктирная рамка

Свойство border является частью блока и влияет на его размеры. Альтернативой border выступает свойство outline. Вот его особенности:

  • outline не влияет на размеры и положение самого элемента;
  • outline не занимает место, не влияет на окружающие элементы и отображается поверх них;
  • для outline нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам;
  • свойство border-radius, задающее радиус скругления рамки, не действует на outline;
  • outline можно расширять и сжимать с помощью outline-offset, отрицательное значение выводит рамку внутри элемента.

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

Пример 4. Использование outline

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Линия</title> <style> blockquote { background: #d6eff8; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ border: 2px solid #0069b5; /* Параметры синей рамки */ outline: 2px solid #c52b1c; /* Параметры красной рамки */ outline-offset: 3px; /* Смещение красной рамки */ } </style> </head> <body> <blockquote> Фьюжн начинает форшлаг. </blockquote> </body> </html>

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

Рис. 4. Две рамки

HTML и CSS с примерами кода

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

Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom

, border-left, border-right.

Фон

Синтаксис

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: unset;

Значения

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

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

Значение по-умолчанию: Зависит от использования

Применяется к: Ко всем элементам

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border</title>
    <style>
      .brd {
        border: 4px double black; /* Параметры границы */
        background: #fc3; /* Цвет фона */
        padding: 10px; /* Поля вокруг текста */
      }
    </style>
  </head>
  <body>
    <div>
      Познание текста, не учитывая количества слогов,
      стоящих между ударениями, дает ямб. Эти слова
      совершенно справедливы, однако генеративная поэтика
      аннигилирует урбанистический скрытый смысл.
    </div>
  </body>
</html>

В данном примере вокруг блока добавляется двойная граница.

border | CSS — Примеры

Генератор

border CSS Cвойство border (w3.org) позволяет установить толщину, стиль и цвет границы элемента.
nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset
nonehiddensoliddotteddasheddoublegrooveridgeinsetoutsetстиль nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset
nonehiddensoliddotteddasheddoublegrooveridgeinsetoutset
div {

border: 3px none rgb(34, 34, 34);

border-top: 3px none rgb(34, 34, 34); border-right: 3px none rgb(34, 34, 34); border-bottom: 3px none rgb(34, 34, 34); border-left: 3px none rgb(34, 34, 34); border-style: none; border-color: rgb(34, 34, 34); border-width: 3px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: rgb(34, 34, 34); border-right-color: rgb(34, 34, 34); border-bottom-color: rgb(34, 34, 34); border-left-color: rgb(34, 34, 34); border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; }

Прозрачный

border CSS

Чтобы сделать прозрачный border следует цвет написать в rgba: теория, конвертер.

<div></div>

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

<div></div>

Чтобы у изображения были полупрозрачные края, сквозь которые просвечивала эта же картинка, а не фон родителя, лучше применить outline.

<img alt="голубой фон в смайликах" src="http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg">

Внутренний

border. Управление длиной блока

Если задано width: auto;, то ширина элемента равна ширине родителя. Она не увеличивается за счёт

margin, border и padding.

width: auto; (по умолчанию)

width: 100%;

В остальных случаях border, как и padding, расширяет коробку элемента. То есть если неправильно рассчитать width, то блок переместится вниз, не поместившись в ограниченное пространство, меню будет некрасиво удлиняться и т.п..

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ширина коробки элемента
Дабы сделать так, чтобы рамка не увеличивала блок, нужно указать box-sizing: border-box;
. Тогда border и padding не будут влиять на ширину контейнера элемента. border: 10px solid yellow;
padding: 10px;
box-sizing: border-box;

width: 240px;

width: 120px;

width: 120px;

Пунктирная обводка внутри HTML блока

Задача: пройти пунктиром по периметру на некотором расстоянии от краёв элемента. Эффект будет такой, как будто на швейной машинке прошили полотно и остались на ткани стежки. Если у кнопки углы закругленны, фон задан градиентом или картинкой, текст должен выделяться мышкой и нужно обойтись одним тегом, то единственно верным решением будет воспользоваться :after:

какой-то текст

<div>какой-то текст</div>

Рамка в процентах

Ширина рамки border-width может устанавливаться в любых единицах измерения, но не в процентах, также как и box-shadow, и outline. Для однотонных линий можно использовать background. Из-за того, что не хочется лишаться padding, нужен ещё и :after:

резиновый border

<div>какой-то текст</div>

Вдавленная линия CSS

Эффект вдавленной линии достигается когда верхняя полоса темнее, нижняя — светлее; выпуклой наоборот.

<hr>

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




Определение и использование

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

Примеры:

  • border-style: dotted solid double dashed;
    • верхняя граница пунктирная
    • правая граница сплошная
    • нижняя граница двойная
    • левая граница прочерчена

  • border-style: dotted solid double;
    • верхняя граница пунктирная
    • правая и левая границы сплошные
    • нижняя граница двойная

  • border-style: dotted solid;
    • верхняя и нижняя границы пунктирные
    • правая и левая границы сплошные

  • border-style: dotted;
    • все четыре границы пунктирные

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

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

Свойство
border-style 1.0 4.0 1.0 1.0 3.5

Примечание: Значение «hidden» не поддерживается в IE7 и более ранних версиях. IE8 требует !DOCTYPE. Поддержка IE9 и более поздних версий «hidden».



CSS Синтаксис

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Значение свойств


Примеры

Пример

Граница хребет :

div {
    border-style: ridge;
    border-color: coral;
    border-width: 7px;
}

Попробуйте сами »

Пример

Граница вставка:

div {
    border-style: inset;
    border-color: coral;
    border-width: 7px;
}

Попробуйте сами »

Пример

Граница начальная:

div {
    border-style: outset;
    border-color: coral;
    border-width: 7px;
}

Попробуйте сами »

Пример

Установить различные границы на каждой стороне элемента:

p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}

Попробуйте сами »

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

CSS учебник: CSS Border

HTML DOM справочник: Свойство borderStyle


Border (рамки) — DigiPortfoolio OÜ печать на масках в Нарве

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

 

Стиль границы.
Если в HTML бордюр мог быть только в виде сплошной линии вокруг элемента, то в CSS это уже достаточно широкий набор возможных стилей рамок.
Свойство border-style может присваивать элементу один из ниже перечисленных стилей границы.

  • none — граница отсутствует (по умолчанию).
  • dotted — граница из ряда точек.
  • dashed — пунктирная граница.
  • solid — сплошная граница
  • double — двойная граница
  • groove — граница «бороздка»
  • ridge — граница «гребень»
  • inset — вдавленная граница
  • outset — выдавленная граница

Пример CSS:
p {background-color: #f5f5f5;text-align: center;}

Пример HTML:
<head>
<title>My CSS</title>
<link rel=»stylesheet» type=»text/css» href=»/style/style.css» media=»all»/>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
</head>
<body>
<p>граница отсутствует</p>
<p>граница из ряда точек</p>
<p>пунктирная граница</p>
<p>сплошная граница</p>
<p>двойная граница</p>
<p>граница «бороздка»</p>
<p>граница «гребень»</p>
<p>вдавленная граница</p>
<p>выдавленная граница</p>
</body>
</html>

Стиль бордюра может быть задан как для всех сторон элемента одновременно, так и для каждой его стороны отдельно в зависимости от того, сколько значений присвоено свойству border- style. Таковых значений может быть от одного до четырёх по числу сторон элемента.
В каждом из четырёх случаев действуют свои «правила» по присуждению стиля рамки той или иной стороне элемента, которые приведены в таблице ниже:

Число значенийРезультат
1

Пример:div {border-style: solid;}

  • Первое значение — Устанавливает единый стиль бордюра для всех сторон элемента.
2

Пример:div {border-style: solid double;}

  • Первое значение — Устанавливает стиль верхней и нижней границы элемента.
  • Второе значение — Устанавливает стиль левой и правой границы элемента.
3

Пример:div {border-style: solid double dashed;}

  • Первое значение — Устанавливает стиль верхней границы элемента.
  • Второе значение — Устанавливает стиль левой и правой границы элемента.
  • Третье значение — Устанавливает стиль нижней границы элемента.
4

Пример:div {border-style: solid double dashed ridge;}

  • Первое значение — Устанавливает стиль верхней границы элемента.
  • Второе значение — Устанавливает стиль правой границы элемента.
  • Третье значение — Устанавливает стиль нижней границы элемента.
  • Четвёртое значение — Устанавливает стиль левой границы элемента.

Толщина границы.
Свойство border-width — устанавливает ширину границы элемента.
Ширина бордюра может быть заданна с помощью следующих аргументов:

  • thin — тонкая граница
  • medium — средняя толщина границы
  • thick — толстая граница

А также в пикселях или любых других единицах измерения принятых в CSS.

Цвет границы.
Цвет рамки или её сторон по отдельности определяется свойством border-color.
Цвет бордюра может иметь следующие значения:

  • #ff0000 — шестнадцатеричное значение цвета RGB.
  • red — именное значение цвета.
  • RGB(255,0,0) — значение цвета RGB.
  • transparent — прозрачная граница.

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

Число значенийРезультат
1

Пример:div {border-style: solid; border-width: 3px; border-color: #008000;}

  • Первое значение — Устанавливает единый цвет бордюра со всех сторон.
2

Пример:div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff;}

  • Первое значение — Устанавливает цвет верхней и нижней границы элемента.
  • Второе значение — Устанавливает цвет левой и правой границы элемента.
3

Пример:div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000;}

  • Первое значение — Устанавливает цвет верхней границы элемента.
  • Второе значение — Устанавливает цвет левой и правой границы элемента.
  • Третье значение — Устанавливает цвет нижней границы элемента.
4

Пример:div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000 #ffff00;}

  • Первое значение — Устанавливает цвет верхней границы элемента.
  • Второе значение — Устанавливает цвет правой границы элемента.
  • Третье значение — Устанавливает цвет нижней границы элемента.
  • Четвёртое значение — Устанавливает цвет левой границы элемента.

Границы справа слева сверху и снизу отдельно.

Для того, что бы определить стиль, цвет и ширину бордюра для одной из сторон элемента, пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними «коллегами по цеху» список которых приведён ниже:
border-bottom — Определяет стиль, цвет и ширину нижней границы элемента.

  • border-bottom-color — Устанавливает цвет нижней границы элемента.
  • border-bottom-style — Определяет стиль нижней границы элемента.
  • border-bottom-width — Определяет ширину нижней границы элемента.

border-left — Определяет стиль, цвет и ширину левой границы элемента.

  • border-left-color — Устанавливает цвет левой границы элемента.
  • border-left-style — Определяет стиль левой границы элемента.
  • border-left-width — Определяет ширину левой границы элемента.

border-right — Определяет стиль, цвет и ширину правой границы элемента.

  • border-right-color — Устанавливает цвет правой границы элемента.
  • border-right-style — Определяет стиль правой границы элемента.
  • border-right-width — Определяет ширину правой границы элемента.

border-top — Определяет стиль, цвет и ширину верхней границы элемента.

  • border-top-color — Устанавливает цвет верхней границы элемента.
  • border-top-style — Определяет стиль верхней границы элемента.
  • border-top-width — Определяет ширину верхней границы элемента.

Задание

Сделайте рамки как показано на рисунке ниже

В предыдущем уроке рассматривали поля и отступы

В следующем уроке рассмотрим высоту и ширину

HTML атрибут border | назначение, значения, примеры

Последнее обновление: 03.02.2011

Атрибут border — задает толщину рамки вокруг элемента в пикселях.

Для элемента <frameset> задает расстояние между фреймами.

Тип значения целое число (в пикселях)
Значение по умолчанию 0
Применим к:
Аналог в CSS border

Пример

<table border="2">
[..]
</table>

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— —> </style> </head> <body> <table border=»2″> <tr><td>первая</td> <td>вторая</td> </tr> </table> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

По умолчанию для таблицы (<table>) рамка изображается трехмерной, но если используется атрибут bordercolor, то рамка становится плоской и окрашивается в заданный цвет.

Если для <table> border без аргументов (<table border>), то браузер отобразит рамку толщиной один пиксель.

Если изображения является ссылкой, тогда по умолчанию вокруг изображения появится рамка, цветом, заданным для этой ссылки. Чтобы убрать рамку, следует для этой картинке задать параметр border=»0″, а лучше это сделать с помощью CSS свойства border. Чтобы не убирать рамку для каждого рисунка в отдельности, опытные верстальщики убирают ее сразу для всех изображений на сайте, используя в начале основного CSS файла правило:

img {
border: none;
}

Данная техника используется при популярном способе облегчить себе жизнь — «Сброс стилей с помощью CSS»

Атрибут border морально старел и запрещен стандартами, используй вместо CSS свойтство border.

По теме

Что означает solid in border-style:solid? CSS



У меня завтра экзамен, и это около 30, у нас всегда было 28; но я действительно не знаю, что именно он делает. Он, конечно, показывает границу, но почему он называется «solid»? W3S на самом деле не дает мне ответа…

Означает ли твердое тело, например, что граница параграфа не является подвижной?

Или это означает, что размер границы не может измениться?

html css
Поделиться Источник tommy ringer     05 июня 2016 в 11:55

3 ответа


  • Исправление проблем CSS border-right и border-left

    По какой-то причине, когда я реализую стиль border-left: 10px solid #FF0000 css для моего левого столбца и border-right: 10px solid #FF0000 для моего правого столбца, по какой-то причине он отбрасывает все… Кто-нибудь знает почему?

  • свойство border-color работает как стиль, а не как класс css

    Я уверен, что это простая проблема, но я не могу заставить класс css работать. Я пытаюсь добавить красную рамку вокруг текстового ввода. Если я установлю свойство border-color встроенным, все будет работать: <input type=text placeholder =Name style=border-color: #b94a48; /> Если я добавлю…



3

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

Поделиться Mike     05 июня 2016 в 11:57



2

SOLID означает отображение одной прямой сплошной линии.

Другие возможные значения;

DOTTED : Отображение ряда закругленных точек.

DASHED : Отображение серии коротких квадратных тире или отрезков линии.

Смотрите полную информацию здесь https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

Поделиться Chuks     05 июня 2016 в 12:07


Поделиться metarmask     05 июня 2016 в 11:57


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


почему свойство border-width не стилизует мой html?

почему border-width not applied css не работает? Ниже приведен мой код: CSS : { border-style:solid; border-width:10px; }


CSS to border <tr> полностью не работает должным образом в Интернете Explorer

Я использую следующий CSS, чтобы полностью граничить с <tr> . <style type=text/css> tr.top td { border-top: thin solid black; } tr.bottom td { border-bottom: thin solid black; } tr.row…


Что означает * (звезда) перед объявлением CSS?

Я использую библиотеки Yahoo YUI в проекте. Может ли кто-нибудь помочь мне понять следующее CSS, с которым я столкнулся в менеджере макетов CSS: Я не смог понять, что делает * (звезда) с…


Исправление проблем CSS border-right и border-left

По какой-то причине, когда я реализую стиль border-left: 10px solid #FF0000 css для моего левого столбца и border-right: 10px solid #FF0000 для моего правого столбца, по какой-то причине он…


свойство border-color работает как стиль, а не как класс css

Я уверен, что это простая проблема, но я не могу заставить класс css работать. Я пытаюсь добавить красную рамку вокруг текстового ввода. Если я установлю свойство border-color встроенным, все будет…


Что означает /(Слэш)в CSS?

Для рендеринга овала со стилями CSS я нашел следующие правила CSS на каком-то веб-сайте #oval { width: 200px; height: 100px; background: red; -webkit-border-radius: 100px / 50px; -moz-border-radius:…


Css Border-bottom-width

Я пытаюсь получить подчеркивание под каждым из моих заголовков h5 в моем нижнем колонтитуле, который имеет 4 столбца. Я придумал следующее css, которое частично выполняет мою цель. .views-col.col-1…


Как сделать » border: 1px solid #72777d» inline

Я использовал border: 1px solid #f2f2f2, чтобы применить границу для коробок, как показано на рисунке , так как я использовал 1px solid, граница одной коробки перекрывается с границей другой…


Как использовать стиль solid border css

Поскольку эластичные часы не допускают <style> , мне нужно использовать формат <th style=\…\> . Но почему-то я не могу заставить свои твердые границы работать должным образом….


CSS-избегание повторения

У меня есть следующий CSS, который создает речевой пузырь. Он отлично работает. Однако моя проблема заключается в том, что я хочу, чтобы на странице были разные цветные речевые пузыри. Я применяю…

границ HTML

Стандартный способ создания границ HTML — использование CSS. Используя CSS, вы можете создать границу вокруг любого элемента HTML.

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

Ниже приведены некоторые примеры того, что можно делать с помощью HTML, границ и CSS.

Сплошная рамка

<стиль> .bordered { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; граница: 10 пикселей сплошной желто-зеленый; } <дел> Коробка с бордюром

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

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

<стиль> .bordered { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; граница: 1px сплошной темно-оранжевый; радиус границы: 8px; } <дел> Коробка с бордюром

Нижняя граница

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

<стиль> а { размер шрифта: 2em; цвет: салатовый; текстовое оформление: нет; нижняя граница: 1px сплошной темно-оранжевый; } а: наведите { цвет: темно-оранжевый; ширина границы: 3px; }

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

Перейдите на страницу Домашняя страница Quackit.

Есть много других свойств границы, которые даже более точны, чем это, например, border-bottom-color , border-bottom-style и т. д.

Полный список свойств границ см. в списке свойств CSS и отфильтруйте по параметру «граница».

Пунктирная рамка

<стиль> .bordered { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; граница: 1px пунктирная черная; } <дел> Коробка с бордюром

Пунктирная граница

<стиль> .окаймленный { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; граница: 1px пунктирная зеленая; } <дел> Коробка с бордюром

Начальная граница

<стиль> .bordered { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; граница: 10 пикселей с отступом желто-зеленый; } <дел> Коробка с бордюром

Врезная рамка

<стиль> .bordered { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; граница: 10px вставка желто-зеленая; } <дел> Коробка с бордюром

Рифленый бордюр

<стиль> .окаймленный { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; граница: канавка 10px желто-зеленая; } <дел> Коробка с бордюром

Двойная рамка

<стиль> .bordered { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; граница: 10px двойная желто-зеленая; } <дел> Коробка с бордюром

Ребристая граница

<стиль> .bordered { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; граница: черный ребро 10 пикселей; } <дел> Коробка с бордюром

Смешанный бордюр

Вы можете комбинировать разные типы и стили границ для каждой стороны HTML-элемента.

<стиль> .bordered { ширина: 200 пикселей; высота: 100 пикселей; отступ: 20 пикселей; ширина границы: 6px; цвет границы: желто-зеленый; стиль границы: пунктирная сплошная двойная; } <дел> Коробка с бордюром

Встроенные стили или внешние стили?

Во всех приведенных выше примерах для создания границ используются встроенные стили. Вы также можете использовать внешние стили для применения стилей на нескольких страницах или на всем веб-сайте. Для этого просто скопируйте все между тегами стиля и поместите их во внешнюю таблицу стилей, затем замените теги стиля тегом link , который указывает на вашу внешнюю таблицу стилей.

Как HTML-код Img Border уступил место CSS: Простое руководство »

Старый способ добавления рамки к изображению

Атрибут border ранее использовался для добавления рамки к элементу .

     

Этот способ добавления границы устарел в HTML5.

Правильный способ добавить рамку к изображению

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

  .border { border-width: 25px; цвет границы: красный; стиль границы: сплошной; }  
    
#border-1 .граница { ширина границы: 25 пикселей; цвет границы: красный; стиль границы: сплошной; }

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

Существует несколько вариантов стиля границы .

  .small { максимальная ширина: 300 пикселей; поля: 0 15px 15px 0; } .border {граница-ширина: 15px; цвет границы: красный; } .dotted { стиль границы: пунктирный; } .dashed { стиль границы: пунктир; } .solid { стиль границы: сплошной; } .double { стиль границы: двойной; } .groove { стиль границы: канавка; } .ridge { стиль границы: хребет; } .вставка { стиль границы: вставка; } .outset { стиль границы: начало; }  
           

Комбинируйте стили границ

Вы можете использовать разные стили границ для каждой стороны изображения.

  .border { ширина границы: 15 пикселей; цвет границы: красный; стиль: сплошной пунктирный двойной пунктир}  
    
#border-3 .border {граница-ширина: 15 пикселей; цвет границы: красный; } #border-3 .mixed { border-style: solid dashed dotted double; }

Border Shorthand

Если вы не делаете ничего особенного или странного, вы можете объединить три различных правила границы в одно свойство border `.

  .border {граница: 15px сплошной красный цвет; }  
    
#border-4 .border { border: 15px сплошной красный; }

Размещение границ и блочная модель

Границы появляются внутри полей, указанных для элемента, но вне отступов.

  #green-box { background-color: green; маржа: 0; заполнение: 0; } #border-padding-margin{ margin: 20px; граница: 20 пикселей, сплошной красный цвет; отступ: 20 пикселей; цвет фона: желтый; }  
  
#border-box-demo #green-box { background-color: green; margin: 0; padding: 0; } #border-box-demo #border-padding-margin{ margin: 20 пикселей; граница: 20 пикселей, сплошной красный; отступы: 20 пикселей; цвет фона: желтый; }

Значения

границы Атрибут
Имя значения Пикселей.

Все атрибуты

IMG Элемент
Имя атрибута Значения Примечания
Высота Высота идентифицирует внутреннюю высоту файла изображения в CSS пикселей.
srcset список источников Определяет несколько размеров одного и того же изображения, позволяя браузеру выбирать соответствующий источник изображения.
выравнивание вправо
влево
Ранее использовался для указания выравнивания и размещения изображения относительно окружающего текста. Он устарел и не должен использоваться.
alt текст Определяет альтернативный текст, который может быть представлен вместо изображения.
граница пикселей Ранее использовалась для определения границы элемента изображения. Он устарел и больше не должен использоваться.
элементы управления Переключаемые элементы управления медиаплеером при использовании в сочетании с атрибутом dynsrc. Оба атрибута теперь устарели.
dynsrc
hspace Ранее использовался для добавления горизонтального пространства с обеих сторон изображения.Сейчас это устарело.
ismap Идентифицирует изображение как карту изображения на стороне сервера. При нажатии на содержащую якорную ссылку координаты мыши будут включены в запрос.
longdesc Определяет URL-адрес, по которому можно найти дополнительную информацию об изображении. Он был выписан из спецификации HTML5, но его статус не так ясен, как другие устаревшие функции.
цикл Ранее использовался для указания количества раз, которое должно воспроизводиться видео, при использовании в сочетании с атрибутом dynsource.Оба атрибута устарели.
lowsrc Задает версию изображения меньшего размера или более низкого качества.
имя Идентифицировал изображение или предоставил дополнительную информацию о нем. Устарело в HTML 4.0 в пользу других атрибутов.
naturalsizeflag Этот атрибут ничего не делает. Когда-то он использовался проприетарной программной системой.
nosave Предназначался для предотвращения загрузки изображений пользователями.Никогда не был частью спецификации HTML и широко не применялся.
запуск открытие файла
наведение курсора мыши
подавление Используется ныне несуществующим браузером Netscape для подавления отображения изображения до завершения загрузки изображения.
usemap Указывает карту изображения на стороне клиента, которая будет использоваться с изображением.
ширина Указывает внутреннюю ширину изображения в пикселях CSS.
src Указывает URL-адрес отображаемого изображения.
Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.

Metro 4 :: Популярная библиотека HTML, CSS и JS

Управляйте отображением границы с помощью классов служебных программ границы.

Добавить границу

Чтобы создать границу, добавьте класс .граница к элементу. Граница по умолчанию цвет прозрачный . Чтобы установить цвет границы, вы должны использовать утилиты цвета границы bd-* , определенные в metro-colors.css (подробности в утилитах цвета)

 
                    
Заблокировать
Пограничные стороны

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

 
                    
Заблокировать

Скрыть границу

Вы можете скрыть границу элемента.Добавьте один из классов: .border-none , .border-left-none , .border-right-none , .border-top-none , .border-bottom-none .

Также вы можете установить невидимую границу с классом: .border-visible-none .

 
                    
Заблокировать

Размер рамки

Для установки размера границы используйте специальные классы: .border-size-* , где значение звездочки от 1 до 10 .

Блок

Блок

Блок

Блок

Блок

 
                    
Заблокировать
Заблокировать
Заблокировать
Заблокировать
Заблокировать

Стиль каймы

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

 
                    <дел>
                    <дел>
                    <дел>
                    <дел>
                    <дел>
                    <дел>
                    <дел>
                    <дел>
                  

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

Metro 4 содержит классы утилит для изменения свойства border-radius .

  • .border-radius - установить радиус границы 0.25rem (по умолчанию 4px)
  • .border-radius-half - установить радиус границы 50%
  • .border-radius-1 до .border-radius-10 - установить радиус границы от 10% до 100%
 
                    <дел>
                    <дел>
                    <дел>
                    <дел>
                    <дел>
                    <дел>
                  
css -

css - Как установить границу для HTML-тега div

css - Как установить границу для HTML-тега div - Qaru

спросил

Просмотрено 774k раз

Я пытаюсь определить границу вокруг тега div в HTML.В некоторых браузерах граница не отображается.

Вот мой HTML-код: