Властивість CSS border для створення межі об'єкта, а саме за товщину рамки, за її колір і стиль. Ця властивість широко використовується в HTML. Ви можете створювати різні ефекти для кращого сприйняття контенту на сторінці. Наприклад, оформити сайдбар, шапку сайту, меню тощо.

1. Синтаксис CSS border

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

• border-width – товщина рамки. Можна задавати пікселі (px) або скористатися стандартними значеннями thin, medium, thick (вони відрізняються тільки шириною в пікселях)
• border-style - стиль рамки, що виводиться. Може приймати такі значення
  • none або hidden - скасовує кордон
  • dotted - рамка з точок
  • dashed - рамка з тире
  • solid - проста лінія (застосовується найчастіше)
  • double - подвійна рамка
  • groove - рифлений 3D кордон
  • ridge, inset, outset - різні 3D ефекти рамки
  • inherit - застосовується значення батьківського елемента
• border-color – колір рамки. Можна ставити за допомогою конкретної назвикольору або у форматі RGB (див. назви html кольорів для сайту)

Значення у властивості CSS border можна задавати у будь-якій послідовності. Найчастіше використовують послідовність "товщина стиль колір".

2. Приклади із різними межами рамок CSS border

2.1. приклад. Різні стилі оформлення межі рамки border-style

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

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

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

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

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

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

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

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

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Михаил 2016-06-11 1 HTML и CSS 0

Как делается в css двойная рамка?

Всем привет. А вы знаете, как делать в css двойную рамку? Если нет, то прошу ознакомиться с этой небольшой заметкой. Дело в том, что это не сделаешь с помощью обычного border , тут нужно идти другим путем.

Если вы задаете рамку с помощью свойства border , то можете задать ее только одну. Но очень часто по дизайну может требоваться несколько рамок. В таком случае стоит воспользоваться псевдорамкой — тенью.

Двойная рамка с помощью box-shadow

Вообще если вы хотите подробнее изучить тень в css, то советую вам прочитать на соответствующую тему. В этой статье я не буду подробно объяснять синтаксис свойства, а просто покажу прием, как создать двойную рамку. Итак, создам обыкновенный блок, которому пропишу некоторые стили. Блок может быть любым и с любым содержимым. В моем случае это простой div, поэтому html код я даже не буду показывать. А вот стили:

Div{
background: #E0D8A3;
width: 180px;
height: 110px;
padding: 12px;
}

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

Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Вот так это выглядит:

Как видите, получилось достаточно симпатично. В box-shadow всего 5 параметров. Первый — смещение тени по горизонтали, второй — по вертикали. Третий и четвертый параметры — размытие и растяжение. Как видите, первые три мы не трогаем вообще. Размытие нам не нужно, потому что нам нужна резкая тень. Как видите, я прописывал четвертый параметр — растяжение. Он определяет, насколько тень будет больше элемента, к которому привязана.

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

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

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

И так, давайте предположим, что вокруг какого-то элемента нужно сделать рамку. Например, создадим заголовок и вокруг него сделаем рамку.

Параметры характеризующие рамку: 1) Толщина рамки, 2) Стиль рамки и 3) Цвет рамки. И давайте по порядку:

• 1. Толщина рамки: border-width:2px ;
• 2. Стиль рамки: border-style:solid ;
• 3. Цвет рамки: border-color:#ff0000 ;

Какие бывают стили рамок в CSS ? Ниже приведены все доступные стили рамок:

• dotted - Это точечная рамка.
• dashed - Это пунктирная рамка
• solid - Это сплошная рамка
• double - Это двойная рамка
• groove - Объемный вид
• ridge - Объемный вид
• inset - Объемный вид
• outset - Объемный вид

Теперь у нас есть все, чтобы создать рамку вокруг заголовка.

HTML

Создание рамки вокруг заголовка.

И сам стиль для рамки.

H2{ border-width: 2px; border-style: solid; border-color: #FF0000; }

В результате вокруг созданного заголовка появилась сплошная рамка красного цвета толщиной в 2px.

Рамка формируется из четырех сторон: Верхней , Правой , Нижней и Левой и, так как у нас указанно свойство border , то браузер по умолчанию рисует все четыре стороны рамки. Таким образом, если требуется задать рамку только с какой-то одной стороны, то используются приставки указывающие сторону, где создать рамку.

• top - Верх.
• right - Право
• bottom - Низ
• left - Лево

Таким образом если мы хотим рамку сделать только снизу абзаца то есть подчеркнуть его то к каждому свойству border добавляем приставку bottom . В результате получится следующая структура кода.

H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; }

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

H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: #FF0000; }

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

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

На картинке выше представлена структура сокращённой записи, где указывается свойство border и в качестве значений, через пробел, указывается ширина рамки - border-width , стиль рамки - border-style и цвет рамки - #ff0000 .

То есть браузер, увидев такую, сокращенную запись border:2px solid #ff0000 ; , так же создаст рамку со всех четырех сторон заголовка. Вот такая короткая запись эквивалентна той записи, что мы использовали выше (где применялось три свойства).

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

H2{ border-top:2px solid #ff0000; }

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

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

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

Толщина рамки

Толщина рамки определяется свойством border-width , которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Цвет рамки

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .

Типы рамок

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для

,

,

и

Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:

H1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }

Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

H1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }

Сокращённая запись

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:

P { border-width: 1px; border-style: solid; border-color: blue; }

можно объединить в:

P { border: 1px solid blue; }

Резюме

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

В следующем уроке мы рассмотрим, как определять размеры в боксовой модели - height и width.

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Блок div з рамою 3px червоного кольору.

Можна вказати стиль кордону лише з одного боку елемента. Для цього застосовують властивості border-top (верхній кордон), border-right (правий кордон), border-bottom (нижній кордон), border-left (лівий кордон).

Блок div з різних кордонів.

У цьому прикладі для кожної сторони блоку задана своя товщина межі, стиль та колір.

Подумайте, як за допомоги CSSможна створити таку фігуру:

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

• border-style – стиль кордону.
• border-width – ширина кордону.
• border-color – колір кордону.

Розглянемо кожне із значень окремо.

Властивість border-style. Стиль кордону.

Властивість border-style встановлює стиль рамки. У CSS, на відміну від HTML, межа елемента може бути не лише суцільною. Допустимі такі значення для стилю кордону:

1. none - межа відсутня (за умовчанням).
2. solid – суцільна межа.
3. double – подвійна межа.
4. dashed – пунктирна межа.
5. dotted - кордон із низки точок.
6. ridge - межа "гребінь".
7. groove - межа "борозенка".
8. inset - вдавлений кордон.
9. outset – видавлений кордон.

Приклади того, як вони виглядають.

кордон відсутня (none)




суцільний кордон (solid)




подвійний кордон (double)




кордон із низки точок (dotted)




пунктирний кордон (dashed)




кордон "борозенка" (groove)




кордон "гребінь" (ridge)




вдавлений кордон (inset)




видавлений кордон (outset)

До речі, якщо для рамки ridge задати колір кордону чорний, то вийде такий результат.

Блок div з чорного кольору і стиль ridge.

Рамка виглядає як solid, але це тому, що стиль ridge створюється додаванням чорного ефекту тіні, а чорний ефект на чорній рамці не видно.

За допомогою властивості border-style стиль кордону може бути заданий не тільки всім сторонам блоку. Є можливість задавати кілька значень одній властивості border-style, залежно від числа значень, стиль кордону буде присвоєний різному числу сторін блоку. Можна задати одне, два, три та чотири значення. Давайте розглянемо приклади кожного випадку.

Одне значення (solid) – стиль кордону встановлений для всіх сторін блоку.




Два значення (solid double) – перше значення встановило стиль для верхньої та нижньої сторін, друге для бічної.




Три значення (solid double dotted) – перше значення для верхньої сторони, друге для бічних, третє для нижньої.




Чотири значення (solid double dotted dashed) – кожне значення для однієї сторони за годинниковою стрілкою починаючи з верхньої.

Властивість border-width. Товщина кордону.

Для встановлення товщини межі елемента використовується властивість border-width. Товщину кордону можна задати в будь-яких абсолютних одиницях виміру, наприклад, у пікселах.

Як і властивості border-style , властивості можна також задавати від однієї до чотирьох значень. Розглянемо приклади кожному за випадку.





Код прикладу:

Одне значення (2px) - товщина кордону встановлена ​​всім сторін блоку.


Два значення (1px 5px) - перше значення встановило товщину для верхньої та нижньої сторін, друге для бічної.


Три значення (1px 3px 5px) – перше значення для верхньої сторони, друге для бічних, третє для нижньої.


Чотири значення (1px 3px 5px 7px) - кожне значення для однієї сторони за годинниковою стрілкою, починаючи з верхньої.

Також для властивості border-width є значення у вигляді ключових слів. Усього їх три:

• thin - тонка межа;
• medium – середня товщина;
• thick - товста межа;

Товщина межі: thin.




Товщина межі: medium.




Товщина межі: thick.

Властивість border-color. Колір кордону.

Для керування кольором кордону використається засіб border-color. Кольори для цієї властивості можна задати, використовуючи будь-який спосіб, описаний у статті "Кольори в CSS", а саме:

• Шістнадцятковий запис (#ff00aa ) кольору.
• Формат RGB - rgb (255,12,110). Формат RGBAдля CSS3.
• Формати HSL та HSLA для CSS3.
• Назва кольору, наприклад, black (чорний). Повний списокНазви кольорів наведено в таблиці назв кольорів CSS.

Властивість border-color може мати від одного до чотирьох значень і обробляє їх аналогічно попереднім властивостям.

Одне значення (red).




Два значення (red black).




Три значення (red black yellow).




Чотири значення (red black yellow blue).

Тепер повернемося до завдання, озвученого вище, і намалюємо фігуру:

Ось код, який малює таку фігуру, тільки більший за розміром:

Встановлення значень для сторін окремо

Вище згадувалося, що можна вказати значення властивостей кордону лише одного боку блоку. Для цих цілей є властивості:

• border-top (верхній кордон)
• border-right (правий кордон)
• border-bottom (нижня межа)
• border-left (лівий кордон)

Нагадаю, для всіх властивостей вказується три значення (товщина, стиль та колір) у будь-якому порядку. Але існують властивості, які дозволяють встановлювати товщину, колір та стиль для кожної сторони окремо. Написання цих властивостей похідно від вищевказаних.

Параметри верхньої межі (border-top).

• border-top-color – задає колір верхньої межі елемента.
• border-top-width – задає товщину верхньої межі елемента.
• border-top-style - визначає стиль верхньої межі елемента.

Параметри правого кордону (border-right).

• border-right-color - задає колір правої межі елемента.
• border-right-width - визначає товщину правої межі елемента.
• border-right-style - визначає стиль правої межі елемента.

Параметри нижньої межі (border-bottom).

• border-bottom-color – задає колір нижньої межі елемента.
• border-bottom-width – задає товщину нижньої межі елемента.
• border-bottom-style - визначає стиль нижньої межі елемента.

Параметри лівого кордону (border-left).

• border-left-color – задає колір лівої межі елемента.
• border-left-width – задає товщину лівої межі елемента.
• border-left-style - визначає стиль лівої межі елемента.

Приклад використання цих властивостей:

У цьому прикладі блоку div спочатку задані межі товщиною 3px та стилем solid для всіх сторін. Потім:
• перевизначений колір верхньої межі за допомогою властивості border-top-color у червоний,
• за допомогою властивості border-right-width встановлена ​​товщина правої межі 10px,
• за допомогою властивості border-bottom-style стиль нижньої межі перевизначено як double,
• за допомогою властивості border-left-color лівій межі встановлено синій колір.

Властивість border-radius. Округлення кутів кордону.

Властивість border-radius призначена для заокруглення кутів меж елемента. Ця властивість з'явилася в CSS3 і коректно працює у всіх сучасних браузерах, за винятком Internet Explorer 8 (і старіших версій).

Значеннями можуть бути будь-які числа, які використовуються у CSS.

Властивість border-radius: 15px.

Якщо рамка блоку не задана, округлення відбувається з фоном. Ось приклад закруглення блоку без рамки, але з фоновим кольором:

Властивість border-radius: 15px.

Існують властивості для заокруглення кожного окремо кута елемента. У цьому прикладі використані всі вони:

Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

Властивість border-radius: 15px.

Хоча цей код можна записати одним оголошенням: border-radius : 15px 0 15px 0 . Справа в тому, що для якості border-radius можна задавати від одного до чотирьох значень. Нижче наведено правила, які визначають такі оголошення.

Уважно вивчивши цю таблицю, можна зрозуміти, що найкоротший запис потрібного стилю буде такий: border-radius : 15px 0 . Усього два значення.

Трохи практики

Малюємо лимон засобами CSS.

Ось код такого блоку:

Margin: 0 auto; /* Розташовуємо блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;

Ми вже малювали фігуру:

Тепер залишимо від неї трикутник:

Код трикутника такий:

Margin: 0 auto; /* Розташовуємо блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;