Рамки в CSS
С помощью таблиц стилей CSS можно сделать рамки практически для любого элемента блога: контейнера (div), обзаца, картинки и т.д.
Рамки задаются свойством border. Это свойство имеет три характеристики: цвет, стиль и толщину.
Для определения этих характеристик рамок используются три различные записи:
1. border-color
2. border-style
3. border-width
Цвет рамки задается так же, как и цвет других элементов в CSS.
Стиль рамки – вид линии – может иметь следующие значения:
Ширина рамки задается в пикселях или словами:
thin – тонкая
medium – средняя (по умолчанию)
thick – толстая
Например:
h1 {
border-style: double;
border-color: #00f;
border- width: 3px;
}
У всех заголовков первого уровня h1 будет двойная рамка, толщиной 3 пикселя синего цвета.
Для рамки CSS допустима и сокращенная форма записи:
h1 {border: double #00f 3px;}
Эта запись полностью равноценна предыдущему варианту. При использовании сокращенной формы значения для ширины, цвета и стиля можно писать в произвольном порядке и отделять друг от друга пробелами.
Для того, чтобы убрать рамку у какого-то элемента, нужно для него написать border-style: none
Но это еще далеко не все возможности, которые доступны для оформления рамок в CSS.
Мы можем задать совершенно разные значения для всех четырех сторон рамки: верхней, нижней, правой и левой.
Для этого существуют свойства:
border-top свойства верхней рамки
border-right свойства правой рамки
border-bottom свойства нижней рамки
border-left свойства левой рамки
Например:
h1 {
border-left: 3px solid gray;
border-right: black thin dotted;
border-top: thick silver solid;
border-bottom: double #c0c0c0 10px;
}
Если в подобном объявлении не писать свойства для какой-то стороны, например, удалить фрагмент для border-right, то правая рамка не будет отображаться совсем. Т.е., можно для объекта задавать только одну или две рамки с любой стороны.
Еще один способ задания свойства рамки состоит в том, что можно назначать стили, цвет и толщину рамок, используя свойства border-color, border-style и border-width для разных сторон рамки.
Например:
h1 {
border-style: double solid dotted double;
border-color: #00f;
border- width: 3px 1px 2px 3px;
}
В этом примере задается рамка синего цвета, со сторонами разной толщины и стиля.
При использовании такой формы записи для определения рамки следует иметь в виду такое важное правило:
Порядок перечисления значений в CSS строго задан верх-правая строна-низ-левая сторона. Или TOP-RIGHT-BOTTOM-LEFT (TRBL)
Есть еще и такая форма записи свойств для рамки:
Border-left-width : 20 px;
Border- color -top : silver;
Как вы видите, CSS предоставляет очень разные и затейливые возможности для рисования рамок на WEB-страницах.
В жизни тоже иногда приходится ставить для себя рамки или, вернее, впихивать себя в рамки чтобы похудеть навсегда. И эта задача требует гораздо больше изобретательности и силы воли 
А как сделать, что бы рамка была – рисунком?
Тогда нужно фоновый рисунок подгружать.
Очень хорошая статья о простых вещах.
Спасибо!
Да интересно, пошел пробовать!
Спасибо!
как сделать круглые рамки?
Для этого нужны особые правила CSS. Если этот вопрос очень интересует, в ближайшее время подготовлю статью на эту тему.