CSS: border. Границы элемента. Двойная рамка с использованием CSS Параметры рамки border bottom width

К созданию различных красивостей вокруг него, и первой такой красивостью будет рамка.

Для начала рассмотрим, самые простые рамки. Для их создания, в CSS используется свойство border , которому можно задать следующие значения:

solid – сплошная рамка;

dashed – пунктирная рамка;

dotted – точечная рамка;

double – рамка двойной линией;

groove – рамка с тенью;

ridge — с рельефом;

Ещё два свойства необходимые для создания простых рамок — это

widht – толщина рамки;

color – цвет рамки;

Согласно техники сокращения, записываются значения, одной строкой, через пробел.

p {
border : 2px solid #ffff00 ;
}

padding – внутренний (отступ рамки от содержания);

margin — внешний (отступ рамки от внешних объектов);

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

top – отступ сверху;

righnt – отступ cправа;

bottom – отступ снизу;

left – отступ слева

Записываются значения этих свойств в сокращённом варианте друг за другом (padding: 10px 30px 15px 20px ), и первым ставится значение top , а дальше по часовой стрелке остальные.

Если поставить только одно значение, то это будет значить, что отступ со всех сторон будет одинаковый.

p {
border : 2px solid #ffff00 ;

margin : 20px ;
}

Если нужно разместить текст, или изображение по центру рамки, то в селектор «p» можно добавить свойство text-align: center ;

Далее рассмотрим, как задаются высота и ширина рамки . Высота рамки задаётся браузером автоматически, и выбирается таким образом, чтобы в нем уместилось содержание, с учётом заданных отступов. А вот ширину мы с вами будем задавать самостоятельно.

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

p {
border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px ;
width : 400px ;
}

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

И последнее, что необходимо сделать — это расположить рамку на странице. Делается это при помощи, уже имеющегося, свойства margin.

А если нужно просто расположить блок рамки по центру страницы, то в свойство margin добавляется значение auto.

p {
border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для первого примера создадим html документ, и создадим рамки solid для блока body (тело документа), и одному абзацу.

В следующих примерах будет изменяться только CSS (то, что заключено в тег style ).

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

Свойство CSS – «border », позволяет задавать толщину, цвет и тип линии по периметру вокруг элемента. Параметры данного свойства могут записываться в одной строке, разделяясь через пробел и в любом порядке.

• - толщина линии один пиксель
• - сплошная линия
• - белый цвет
• - чёрный цвет
• - серый цвет

Сплошная граница элемента

Штриховая граница элемента

Пунктирная граница элемента

Граница элемента двойной линией

Свойство отдельных участков границы

Вдавленная рифленая рамка в объёме

Выпуклая рифленая рамка в объёме

Объемная вдавленная рамка

Объемная выпуклая рамка

Уроки / CSS /

Урок 7. Рамка элемента CSS

Практически на каждом на сайте используется свойство, которое создаёт вокруг элемента рамку. Она нужна либо для кнопок, либо для блоков с текстом. Для создания рамки у элемента в CSS есть два свойства: border и outline. Рассмотрим их.

border

Данное свойство нужно для установки рамки вокруг элемента, указывает на его границу в web-документе, ширина рамки учитывается при расположении элемента. Имеет 3 значения — цвет, толщину и тип рамки.

Синтаксис у свойства border следующий:

border: Ширина Тип Цвет;
Можно выбрать и другой порядок указания значений свойства, но главное через пробел.

Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%).
Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.

Ниже представлены ТИПЫ линий с их названиями:

Как установить рамки у элемента? Делаем следующим образом:

#block {
border:3px solid #0085сс; /* установили линию толщиной 3 пикселя синего цвета */
}

Если Вы хотите установить одну-две-три рамки с определённой стороны , то указываем так:

border-top — рамка сверху;
border-bottom — рамка снизу;
border-left — рамка слева;
border-right — рамка справа;

Block {
border-right: 3px solid #0085cc;
border-bottom: 2px dashed #0085cc;
}

Если Вы хотите убрать рамки элемента в CSS, то пропишите в свойстве border — none

Empty {
border: none; /* у элемента с классом empty не будет рамки */
}

outline

Outline — это свойство, которое нужно для установки внешней рамки элемента.

Есть два отличия от border :
Во-первых, линия, задаваемая в outline НЕ будет влиять на положение самого блока, его ширину и высоту.
Во-вторых, возможность установки рамки с определённой стороны отсутствует.
Синтаксис тот же, что и border.

outline: 2px dotted #0085cc; /* рамка 2 пикселя пунктиром синяя*/
Для outline, как и для border, убрать рамки можно прописав none:

Спасибо за внимание!

Предыдущая статья
Урок 6.

Границы элемента.

Отступы и поля в CSS. Что такое margin и padding?Следующая статья
Урок 8. Как установить цвет текста и фон элемента в CSS?

Комментарии к статье (vk.com)

border

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

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Описание

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

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

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

Совет: как правило, при использовании рамки требуется добавлять внутренние отступы.

CSS-свойство: border

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

Синтаксис

border: border-width border-style border-color|inherit;

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

Пример

Здесь содержится какой-то текст.

Результат данного примера в окне браузера:

Как задать цвет, стиль и размер бордюра в боксах.

В языках разметки бордюр(border ), имеют только таблицы, картинки и фреймы, в некоторых случаях удается задать цвет бордюра и на этом все.

Атрибут border

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

В CSS мы можем управлять шириной рамки(бордюра) при помощи border-width , а если быть точнее то мы можем управлять толщиной каждой стороны отдельно:
border-top-width — толщина верхнего бордюра
border-right-width — толщина правого бордюра
border-bottom-width — толщина нижнего бордюра
border-left-width — толщина левого бордюра
Но может быть и сокращенная форма:
P{border-width:top right bottom left;} (верх право низ лево).
Ширина бордюра может задаваться:
цифрами DIV{border-width:5px}, от ноля до бесконечности, т.е. положительные.
thin — тонкий бордюр, DIV{border-width:thin}
medium — средний бордюр, DIV{border-width:medium}
thick — толстый бордюр, DIV{border-width:thick}
С цифрами понятно, а вот с этими значениями все зависит от браузера, но все же thin <= medium <= thick .

Так-же мы можем управлять цветом бордюра при помощи border-color или если быть точнее цветом каждой стороны:
border-top-color цвет верхнего бордюра;
border-right-color цвет правого бордюра;
border-bottom-color цвет нижнего бордюра;
border-left-color цвет бордюра с левой стороны.
Значение цвета задается как для color , т.е. одним из 16 цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white или yellow , также цвета можно задавать: color:#000000 , color:#AF0 , color:rgb(255,0,0) или color:rgb(100%, 0%, 0%) .
Не зависимо какую цветовую схему вы выберите, браузеры все равно его переведут в color:rgb(255,0,0) . Например color:lime = color:#00ff00 = color:#0F0 = color:rgb(0%, 100%, 0%) , а для браузера все равно color:rgb(0,255,0) , т.е. он вычислит это значение.

Если толщиной и цветом бордюра может управлять и HTML то стилем(border-style ) только CSS!!!
Стилем можно управлять каждой стороной отдельно:
border-top-style стиль верхнего бордюра;
border-right-style стиль правого бордюра;
border-bottom-style стиль нижнего бордюра;
border-left-style стиль бордюра с левой стороны.
Теперь рассмотрим значения ститилей:
1)border-style:none — Это значение по умолчанию, аналогично border-width:0.
2)border-style:hidden — Тоже самое, за исключением таблиц(table), которые мы рассмотрим позже.
3)border-style:dotted — Бордюр из точек.
4)border-style:dashed — Бордюр из пунктирной линии.
5)border-style:solid — Бордюр из сплошной линии, т.е. как в HTML.
6)border-style:double — Бордюр из двойной сплошной линии, здесь нужна толщина(border-width) минимум 3пикселя.
7)border-style:groove — Бордюр выглядит как вырезанный в канве.
8)border-style:ridge — Бордюр выглядит как выступающий над канвой.
9)border-style:inset — Весь бокс выглядит как вдавленный в канву.
10)border-style:outset — Противоположен предыдущему.
Некоторые браузеры могут игнорировать значения: dotted, dashed, double, groove, ridge, inset и outset и выводит их как solid, т.е. обычным бордюром.

Все конечно это так, но все примеры выше это только принцип работы, а не механизм.
Свойство правила border подразумевает {border: размер стиль цвет;}, это правило выполняется при наличии всех трех значений и только в такой последовательности, например H1{ border: 5px double red;} , но могут быть и исключения, если эти значения предусмотрены языками разметки, например для таблицы TABLE{border: 2px} , т.е. задается только одно значения.

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

Исключением есть вот такое правило:
H1{
border: 4px solid green;
}
Дело все в том что в CSS последнее правило имеет самый высокий приоритет, данном случае свойство border содержит в себе border-left и потому правило border-left будет проигнорировано, правильно вот так:
H1{
border: 4px solid green;
border-left: 2px double red;
}
С начала мы устанавливаем правила для всего бордюра, а потом уже для от дельных участков.

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

CSS: border. Границы элемента.

CSS3 Границы

CSS3 Границы

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

В этом уроке вы узнаете о следующих свойствах границы:

• border-radius
• box-shadow
• border-image

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

Свойство	Поддержка Браузерами
border-radius
box-shadow
border-image

Internet Explorer 9 поддерживает некоторые из новых свойств границы.

Firefox требует приставки -moz- для border-image.

Chrome и Safari требует приставки -webkit- для border-image.

Opera требует приставки -o- для border-image.

Safari также требует приставки -webkit- для box-shadow.

Opera поддерживает новые свойства границы.

CSS3 Закругленные Углы

Добавление закругленных углов в CSS2 было хитрым. Мы должны были использовать различные изображения для каждого угла.

В CSS3, создание закругленных углов является простым.

В CSS3, свойство border-radius используется для создания закругленных углов:

Этот блок имеет закругленные углы!

CSS3 Тень Контейнера

В CSS3, свойство box-shadow используется для добавления тени к контейнерам:

CSS3 Граница-Изображение

Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:

Свойство border-image позволяет вам указать границу-изображение!

Оригинальное изображение, используемое для создания границы ваше:

Новые Свойства Границы

Атрибут border

Атрибут border , тега

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

HTML Borders

Допустимо использовать border без значений, тогда толщина рамки будет равна одному пикселю. По умолчанию рамка отображается с трехмерными эффектами, но если дополнительно применить атрибут background, то рамка станет «плоской».

Кроме этого, если атрибут border имеет ненулевое значение, то браузеры показывают и тонкие границы вокруг самих ячеек. Отображением этих границ можно управлять, используя атрибут rules.

Значения

Значением атрибута может быть любое неотрицательное число задающее размер в пикселях.

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

Синтаксис

Обязательный атрибут: нет.

Пример HTML: применение атрибута border

Результат примера

Результат. Применение атрибута border.

Border-image - свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.

Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.

Upd: В Firefox работают начиная с 29-й версии .

Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.

Если задать только border-image-source , картинка заполнит собой уголки, не зная что ей делать дальше:

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

Важное свойство, которое определяет размер куска изображения, которое заполнит углы рамки. Остальные части будут использованы для заполнения пространства между углами по алгоритму, заданному в border-image-repeat .

Возможные значения:

<проценты> - рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты. <числа> - пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются. fill - ключевое слово, дополняющее предыдущие значения. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. Очень полезно для округлых рамок.

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

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

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;

Border-image-repeat

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

Возможные значения: stretch - растягивает заполняющий участок картинки. Значение по умолчанию; repeat - повторяет заполняющий участок, при этом видны места стыков с угловой картинкой; round - заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие. space - действует похоже на repeat . Разницы не обнаружила.

Можно задать два значения сразу, первое будет отвечать за поведение картинки в верхней и нижней рамке, второе - за левую и правую.

Border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: repeat;

Слева repeat , справа round .

Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее, вот пример .

Border-image-width

border-image-width

Свойство управляет шириной видимой части рамки, масштабирует её. Если это значение больше ширины border-width , картинка рамки заползет под содержимое, даже если не заданно свойство fill .

Возможные значения: <длина> - значения в px или em; <%> - значения в процентах относительно размера изображения; <числа> - числовое значение, на которое умножается border-width auto - ключевое слово. Если оно задано, значение равно соответственному border-image-slice . Если подходящего размера нет, используется значение border-width , при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 80; border-image-repeat: round; border-image-width: 160px;

Справа рамка с border-image-width . На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.

Border-image-outset

Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.

Возможные значения: <длина> - значения в px или em; <числа> - числовое значение, на которое умножается border-width .

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 120; border-image-repeat: round; border-image-outset: 60px 10px 50px 120px;

Справа пример с border-image-outset . Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы.

Одним из занятных приложений свойства CSS3 box-shadow является создание двойной рамки вокруг элемента. Очень интересный эффект для оформления страниц, Но работать он будет только в новых версиях браузеров, которые поддерживают box-shadow .

Однако существует еще несколько методов для создания такого эффекта. Причем очевидное использование фонового изображения является весьма далеким от идеала.

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

Метод 1: border и outline

Данный метод работает только в тех браузерах, которые поддерживают свойство outline (все, кроме IE6/7). Вы добавляете элементу оба свойства border и outline .

One { border: solid 6px #fff; outline: solid 6px #888; }

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

Метод 2: псевдо элемент

Данный метод требует абсолютного позиционирования рамки:

Two { border: solid 6px #fff; position: relative; z-index: 1; } .two:before { content: ""; display: block; position: absolute; top: -12px; left: -12px; border: solid 6px #888; width: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10; }

Ключевыми моментами являются установка свойства z-index (чтобы псевдо элемент перекрывал содержание), позиционирование и значение min-height . Последнее свойство сохраняет эластичность рамки.

Метод 3: тень

Самый лучший метод, так как требуется только одна строчка кода с установками свойства box-shadow .

Three { box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; }

Для появления двойной рамки используются две тени. Они определяются через запятую. Размытие устанавливается в 0. Так как вторая тень перекрывается первой, то она имеет вдвое большую ширину. Ключевой момент - использование непрозрачных цветов, что создает четкую границу между рамками.

Как и свойство outline , box-shadow не влияет на соседние элементы и может перекрывать их. Поэтому надо установить поле для формирования внешнего вида композиции.

Естественно, поддержка свойства box-shadow ограничена новыми браузерами.

Метод 4: Дополнительный элемент div

В данном методе используется внешний элемент