Border в html: CSS border, . () html – Все о свойстве border / Habr

Leave a Comment / Html / By /

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.

По теме

Атрибут border | HTML | WebReference

Изображение можно поместить в рамку различной ширины. Для этого служит атрибут border элемента <img>. Цвет рамки совпадает с цветом текста или ссылки, если изображение является ссылкой.

Чтобы убрать рамку, следует указать border=»0″.

Данный атрибут устарел, взамен используйте стили.

Синтаксис

<img border="<число>">

Значения

Любое целое положительное число в пикселях.

Значение по умолчанию

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>IMG, атрибут border</title>
 </head>
 <body text="#00ff00">
  <p><img src="image/sample.gif" 
   border="2" alt=""></p>
 </body>
</html>

Примечание

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>img</title>
  <style>
   img {
    border: 2px solid red; /* Параметры рамки */
   }
  </style>
 </head>
 <body> 
  <img src="image/sample.gif" alt="">
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 08.11.2016

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Атрибут border | HTML | WebReference

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

Данный атрибут устарел, взамен используйте стили.

Синтаксис

<table border="<число>">...</table>

Значения

Любое целое положительное число.

Значение по умолчанию

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>TABLE, атрибут border</title>
 </head>
 <body>
  <table cellspacing="2" border="1" cellpadding="5">
   <tr>
    <td> ... </td>
   </tr>
  </table>
 </body>
</html>

Примечание

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рамка таблицы</title>
  <style>
   table {
    width: 600px;
    border: 2px solid red;
   }
  </style>
 </head>
 <body> 
  <table>
   <tr>
    <td> ... </td>
   </tr> 
  </table>
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03.01.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

border-top | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

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

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

border-top: [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-top</title>
  <style>
   .line {
    border-top: 1px solid red; /* Линия сверху текста */
    border-bottom: 1px solid red; /* Линия снизу текста */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body> 
  
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat.
  </div>
  
 </body>
</html>

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

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

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

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

Браузеры

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

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

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

Свойство border-bottom | CSS справочник

CSS свойства

Определение и применение

CSS свойство border-bottom устанавливает все свойства нижней границы в одном объявлении. Разрешается использовать объявление в котором одно из значений отсутствует.

Свойства, которые можно установить:

  • ширина нижней границы — border-bottom-width (medium | thin | thick | length | initial | inherit).
  • стиль нижней границы — border-bottom-style (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit).
  • цвет нижней границы — border-bottom-color (color | transparent | initial | inherit).

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

CSS синтаксис:

border-bottom:"border-width border-style border-color | initial | inherit";

JavaScript синтаксис:

object.style.borderBottom="3px solid orange"

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

ЗначениеОписание
border-bottom-widthЗадает ширину нижней границы. По умолчанию — «medium».
border-bottom-style Задает стиль нижней границы. По умолчанию — «none».
border-bottom-colorЗадает цвет нижней границы. По умолчанию — цвет элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство border-bottom</title>
<style> 
.primer {
border :4px solid orange; /* задаём сплошную границу шириной 4px оранжевого цвета для всех сторон */
border-bottom :4px dotted khaki; /* задаём для нижней границы пунктир шириной 4px цвета хаки */
text-align:khaki; /* задаём выравнивание текста по центру */
}
</style>
</head>
	<body>
		<p class = "primer">Пример использования свойства border-bottom.</p>
	</body>
</html>
Пример использования свойства border-bottom.CSS свойства

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

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