The CSS border property aliases to create an object's border, namely the thickness of the border, its color and style. This property is widely used in HTML. You can create various effects for better perception of the content on the page. For example, design a sidebar, website header, menu, etc.

1. CSS border syntax

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

• border-width - border thickness. You can set it in pixels (px) or use the standard thin, medium, thick values \u200b\u200b(they differ only in width in pixels)
• border-style - the style of the rendered border. Can take the following values
  • none or hidden - cancels the border
  • dotted - dotted frame
  • dashed - dash frame
  • solid - simple line (used most often)
  • double - double border
  • groove - 3D grooved border
  • ridge, inset, outset - various 3D frame effects
  • inherit - the value of the parent is applied
• border-color - border color. Can be set using a specific color name or in RGB format (see html color names for the site)

The values \u200b\u200bin the CSS border property can be specified in any order. The most commonly used sequence is "thickness style color".

2. Examples with different border CSS borders

2.1. Example. Different styles of border-style border decoration

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 . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

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

A div with a 3px red border.

You can specify a border style on only one side of an element. To do this, use the properties border-top (top border), border-right (right border), border-bottom (bottom border), border-left (left border).

Div block with different borders.

In this example, each side of the box has a different border thickness, style, and color.

Consider how you can create a shape like this using CSS:

Border values \u200b\u200b- thickness, style and color - can be set separately using special properties.

• border-style - the style of the border.
• border-width - the width of the border.
• border-color - border color.

Let's consider each of the values \u200b\u200bseparately.

The border-style property. Border style.

The border-style property sets the style of the border. In CSS, unlike HTML, the border of an element can be more than just a solid one. The following values \u200b\u200bare valid for the border style:

1. none - no border (default).
2. solid - solid border.
3. double - double border.
4. dashed - dashed border.
5. dotted is a line of dots border.
6. ridge - ridge border.
7. groove - groove border.
8. inset - a depressed border.
9. outset - extruded border.

Examples of what they look like.

no border (none)




solid border




double border (double)




dotted border




dashed border




groove border




ridge border




inset border




extruded border (outset)

By the way, if you set the border color to black for the ridge frame, you get the following result.

A div with a black border and ridge style.

The border looks like solid, but that's because the ridge style is created by adding a black drop shadow effect, and the black effect on the black border is not visible.

Using the border-style property, the border style can be set for more than just all sides of the block. It is possible to set several values \u200b\u200bfor one border-style property, depending on the number of values, the border style will be assigned to a different number of sides of the block. You can set one, two, three and four values. Let's look at examples for each case.

One value (solid) - the border style is set for all sides of the block.




Two values \u200b\u200b(solid double) - the first value sets the style for the top and bottom sides, the second for the side.




Three values \u200b\u200b(solid double dotted) - the first value for the top side, the second for the side, the third for the bottom.




Four values \u200b\u200b(solid double dotted dashed) - each value for one side clockwise starting from the top.

Border-width property. Border thickness.

The border-width property is used to set the border thickness of an element. The border thickness can be specified in any absolute unit of measurement, such as pixels.

As with the border-style property, the property can also be set to one to four values. Let's look at examples for each case.





Example code:

One value (2px) - border thickness is set for all sides of the block.


Two values \u200b\u200b(1px 5px) - the first value set the thickness for the top and bottom sides, the second for the side.


Three values \u200b\u200b(1px 3px 5px) - the first value for the top side, the second for the sides, and the third for the bottom.


Four values \u200b\u200b(1px 3px 5px 7px) - each value for one side clockwise starting from the top.

There are also keyword values \u200b\u200bfor the border-width property. There are three of them:

• thin - thin border;
• medium - medium thickness;
• thick - thick border;

Border thickness: thin.




Border thickness: medium.




Border thickness: thick.

The border-color property. Border color.

The border-color tool is used to control the border color. The colors for this property can be set using any method described in the article "Colors in CSS", namely:

• Hexadecimal notation (# ff00aa) of color.
• RGB format - rgb (255,12,110). RGBA format for CSS3.
• HSL and HSLA formats for CSS3.
• Color name, such as black. For a complete list of color names, see the CSS color names table.

The border-color property can also have one to four values \u200b\u200band handles them in the same way as the previous properties.

One value (red).




Two values \u200b\u200b(red black).




Three meanings (red black yellow).




Four meanings (red black yellow blue).

Now let's go back to the problem mentioned above and draw a shape:

Here is the code that draws such a shape, only larger in size:

Setting values \u200b\u200bfor sides separately

As mentioned above, you can specify border property values \u200b\u200bfor only one side of a block. For these purposes, there are properties:

• border-top (top border)
• border-right (right border)
• border-bottom (bottom border)
• border-left (left border)

Let me remind you that all properties have three values \u200b\u200b(thickness, style and color) in any order. But there are properties that allow you to set the thickness, color and style for each side separately. The writing of these properties is derived from the above.

Top border options (border-top).

• border-top-color - Sets the color of the element's top border.
• border-top-width - Sets the thickness of the element's top border.
• border-top-style - Sets the style of the top border of an element.

Right border options (border-right).

• border-right-color - Sets the color of the right border of an element.
• border-right-width - Sets the width of the right border of an element.
• border-right-style - Sets the style of the right border of an element.

Bottom border options (border-bottom).

• border-bottom-color - sets the color of the element's bottom border.
• border-bottom-width - Sets the width of the bottom border of the element.
• border-bottom-style - Sets the style of the bottom border of an element.

Left border options (border-left).

• border-left-color - Sets the color of the element's left border.
• border-left-width - Sets the width of the left border of the element.
• border-left-style - Sets the style of the element's left border.

An example of using these properties:

In this example, the div is first given a 3px border and a solid style on all sides. Then:
• redefined the color of the top border with the border-top-color property to red,
• using the border-right-width property set the thickness of the right border to 10px,
• using the border-bottom-style property, the bottom border style is redefined as double,
• using the border-left-color property, the left border is set to blue.

Border-radius property. Rounding the corners of the border.

The border-radius property is for rounding the corners of an element's borders. This property was introduced in CSS3 and works correctly in all modern browsers with the exception of Internet Explorer 8 (and older).

The values \u200b\u200bcan be any number used in CSS.

Border-radius property: 15px.

If the block frame is not specified, then rounding occurs with the background. Here's an example of rounding a box without a border, but with a background color:

Border-radius property: 15px.

There are properties for rounding each corner of an element individually. This example uses all of them:

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

Border-radius property: 15px.

Although this code can be written in one declaration: border-radius: 15px 0 15px 0. The point is that the border-radius property can be set from one to four values. The table below lists the rules that govern such ads.

Having carefully studied this table, you can understand that the shortest record of the required style will be like this: border-radius: 15px 0. Only two values.

A little practice

Drawing a lemon using CSS.

Here is the code for such a block:

Margin: 0 auto; / * Place the block in the center * / width: 200px; height: 200px; background: # F5F240; border: 1px solid # F0D900; border-radius: 10px 150px 30px 150px;

We have already drawn the shape:

Now let's leave a triangle from it:

The triangle code is like this:

Margin: 0 auto; / * Place the block in the center * / padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;