Как сделать границы в html

Как сделать рамку в HTML и CSS

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

Рамку вокруг любого текста можно создать с помощью HTML и CSS . В приведенном ниже примере мы окружили абзац ( ) красной рамкой.

Чтобы создать приведенный выше эффект, использовался следующий код:

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

В данном коде стиль определяет размер границы ( px — пиксели ), тип стиля и цвет границы ( border color CSS ). Стиль границы — это то, как на экране отображается рамка. Другие типы стилей границ — dotted , dashed , double , groove , ridge , inset и outset . Окраску границы определяет цвет, который будет использован для нее. В приведенном выше примере использовался красный цвет ( #FF0000 ).

Определение стиля с помощью CSS

Стиль того, как элемент отображается на веб-странице, также можно через CSS-код , помещенный в раздел HTML-страницы или внешнего файла CSS . Например, в приведенном ниже примере создается новый класс « borderexample », который может быть применен к любому HTML- тегу :

 .borderexample

Используя приведенный выше код, можно создать для элемента рамку с помощью внешних стилей CSS , которая аналогична предыдущему примеру с использованием HTML border color :

Here is an example of a border created using CSS

Вадим Дворников автор-переводчик статьи « Create a colored border around text with HTML and CSS »

Как сделать рамки в таблице html

Чтобы оформить границы ячеек таблицы, достаточно применить CSS свойство border .

   Наименование Кол-во   Груши 10   Яблоки 7   Мандарины 5   

table, td, th  /* задаем границу для всех элементов */ border: 3px solid #245488; > td, th  /* делаем отступ в ячейках, выставляем выравнивание текста */ padding: 10px 20px; text-align: center; > 

Результат:

На рисунке выше видно, что граница «задвоилась», так как css свойство border применяется к каждому элементу таблицы — и к table, и к каждому th/td. Для того, чтобы «схлопнуть» такие границы достаточно применить свойство border-collapse .

table, td, th  border-collapse: collapse; border: 3px solid #245488; > 

Результат:

Рамки и границы

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

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

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

Возникает вопрос — в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

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

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).

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

Рамка при использовании :hover

При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое — заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

Пример 2. Рамка при наведении

outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод — добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.

Пример 3. Рамка при наведении

Рамка вокруг полей формы

В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.

Рис. 2. Рамка вокруг полей

Пример 4. Убираем рамку

Рамки через box-shadow

Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.

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

В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .

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

     div 

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

Рис. 3. Рамки, созданные свойством box-shadow

border

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

Синтаксис

Значения

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

Рис.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 .