Атрибут border может быть применен к любым объектам.
border-width - задает толщину всех границ элемента.
Толщина может быть задана числовым значением (в пикселях). Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium. border-style задает тип границ элемента. border-color задает цвет границ элемента страницы. Может принимать значение transparent для задания невидимой, но имеющей ширину границы.
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится в верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней. Для установки рамки только на определенных сторонах элемента воспользуйтесь параметрами border-top, border-bottom, border-left, border-right:
border-style: none; - запрещает рисование границы (значение по умолчанию);- border-style: dotted; - рисует точечную линию;
- border-style: dashed; - рисует штриховую линию;
- border-style: solid; - рисует сплошную линию;
- border-style: double; - рисует двойную сплошную линию;
- border-style: groove; - рисует трехмерную вдавленную границу;
- border-style: ridge; - рисует трехмерную выпуклую границу;
- border-style: inset; - рисует трехмерную "ступеньку вверх";
- border-style: outset; - рисует трехмерную "ступеньку вниз".
|
border задает все свойства границ элемента страницы в один прием. Заменяет атрибуты border-color, border-style и border-width. Значения этих атрибутов могут располагаться в любом порядке. Синтаксис: <... style="border: border-width || border-style || color">
Вместо многоточия может быть table, blockquote, fieldset, img, p, div, textarea...
style="border: dotted red thin;" |
| style="border: dashed #c0c0c0 5px;" |
| style="border: solid green 3px;" |
| style="border: double #000000 5px;" |
| style="border: groove red medium;" |
| style="border: ridge #FF8000 thick;" |
| style="border: inset #8080FF 3px;" |
| style="border: outset #8080FF 3px;" |
| style="border-style: solid; border-width: thick; border-top-color: #00FF00; border-right-color: #00FFFF; border-bottom-color: #FFFF00; border-left-color: #8080FF;" |
Это были примеры с таблицами.
Теперь рассмотрим другие возможности применения атрибута стиля border:
 | для IMG | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | для BLOCKQUOTE | | для FIELDSET | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | для P | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | для DIV | | для TEXTAREA |
Кстати, все это можно комбинировать:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
|
|
|
Здесь три таблицы, вложенные друг в друга. Ширина задана только для внешней, остальные подстроились под нее. У каждой таблицы свой стиль границы.
Нравится? ;)
|
