Основы работы с CSS

Границы в CSS

Разбить на страницы
Показывать лекцию целиком

Параметры границ в CSS определяют рамки вокруг элементов. Рассмотрим несколько примеров использования границ.

  • Пример в котором показано, как задать стиль для четырех сторон границы.
    <html>
<head>
<style type="text/css">
pre.inset {border-style: inset}
li.outset {border-style: outset}
h1.dotted {border-style: dotted}
h2.dashed {border-style: dashed}
h3.solid {border-style: solid}
h4.double {border-style: double}
h5.groove {border-style: groove}
h6.ridge {border-style: ridge}
</style>
</head>

<body>
<pre class="inset">рамка inset </pre>

<ol>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
</ol>

<h1 class="dotted">рамка dotted</h1>

<h2 class="dashed">рамка dashed</h2>

<h3 class="solid">рамка solid</h3>

<h4 class="double">рамка double</h4>

<h5 class="groove">рамка groove </h5>

<h6 class="ridge">рамка ridge</h6>

</body>

</html>
  • Пример в котором показано, как задать различные стили границы на каждой стороне элемента.
    <html>
<head>
<style type="text/css">
h1.styleh1 {border-style: dashed ridge solid}
h2.styleh2 {border-style: solid dashed}
h3.styleh3 {border-style: dashed groove}
h4.styleh4 {border-style: double solid dashed groove}
</style>
</head>

<body>
<h1 class="styleh1">заголовок заголовок заголовок</h1>

<h2 class="styleh2"> заголовок заголовок заголовок </h2>

<h3 class="styleh3"> заголовок заголовок заголовок </h3>

<h4 class="styleh4"> заголовок заголовок заголовок </h4>
</body>

</html>
  • Пример, в котором показано, как задать цвет границы — она может иметь свой цвет для каждой стороны.
    <html>
<head>

<style type="text/css">
h1.styleh1
{
border-style: dashed;
border-color: green
}
h2.styleh2
{
border-style: dotted;
border-color: #ff00ff blue
}
h3.styleh3
{
border-style: solid;
border-color: red yellow rgb(12,200,30)
}
h4.styleh4
{
border-style: dashed;
border-color: green blue red yellow
}
</style>

</head>

<body>

<h1 class="styleh1">одноцветная рамка</h1>

<h2 class="styleh2">рамка из двух цветов</h2>

<h3 class="styleh3">рамка из трех цветов</h3>

<h4 class="styleh4">рамка из четырех цветов</h4>

<pre><i>Внимание:</i> Свойство<b>"border-color"</b> не работает, 
  если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>

</body>
</html>
  • Пример, в котором показано, как задать толщину нижней стороны границы.
    <html>
<head>
<style type="text/css">
h1 
{
border-style: dashed;
border-bottom-width: 7px
}
</style>
</head>

<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Параметр <b>"border-bottom-width"</b> не работает, 
  если используется в одиночку.
      Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>

</html>
  • Пример, в котором показано, как задать толщину левой стороны границы.
    <html>
<head>
<style type="text/css">
h2 
{
border-style: dotted;
border-left-width: 7px
}
</style>
</head>

<body>
<h2>Внимание</h2>
<pre><i>Внимание:</i> Свойство <b>"border-left-width"</b> не работает, 
  если используется в одиночку.
Сначала задайте границу с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>
    •
  • Пример, в котором показано, как задать толщину правой стороны границы.
    <html>
<head>
<style type="text/css">
h1 
{
border-style: dashed;
border-right-width: 7px
}
</style>
</head>

<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Свойство <b>"border-right-width"</b> не работает, если используется в одиночку.
Сначала задайте границу с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>
  • Пример, в котором показано, как задать толщину верхней стороны границы.
    <html>
<head>
<style type="text/css">
h4
{
border-style: dotted;
border-top-width: 7px
}
</style>
</head>

<body>
<h4>заголовок h4</h4>
<pre><i>Внимание:</i> Свойство <b>"border-top-width"</b> не работает, 
   если используется в одиночку.
Сначала задайте границу с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>
  • Пример, в котором показано, как задать все свойства для нижней стороны границы в одном объявлении.
    <html>
<head>
<style type="text/css">
h1 
{
border-bottom: thick double blue
}
</style>
</head>

<body>
<h1> Заголовок h1.</h1>
</body>

</html>
  • Пример, в котором показано, как задать все свойства для левой стороны границы в одном объявлении.
    <html>
<head>
<style type="text/css">
pre 
{
border-left: thin ridge #f0ffff
}
</style>
</head>

<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>

</html>
  • Пример, в котором показано, как задать все свойства для правой стороны границы в одном объявлении.
    <html>
<head>
<style type="text/css">
h4 
{
border-right: thick solid rgb(0,200,200)
}
</style>
</head>

<body>
<h4>Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4 
Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4</h4>
</body>

</html>
  • Пример, в котором показано, как задать все свойства для верхней стороны границы в одном объявлении.
    <html>
<head>
<style type="text/css">
pre
{
border-top: thin dashed yellow
}
</style>
</head>

<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>

</html>
  • Пример, в котором показано, как задать толщину всех четырех сторон границы в одном объявлении. Допускается определение от одного до четырех значений.
    <html>
<head>
<style type="text/css">
h1.styleh1 
{
border-style: dotted;
border-width: 7px 12px
}
h2.styleh2 
{
border-style: dashed;
border-width: 3px 6px 8px
}
h3.styleh3 
{
border-style: outset;
border-width: 7px 
}
h4.styleh4 
{
border-style: inset;
border-width: 3px 6px 8px thick
}
</style>
</head>

<body>
<h1 class="styleh1">Заголовок h1</h1>
<h2 class="styleh2">Заголовок h2</h2>
<h3 class="styleh3">Заголовок h3</h3>
<h4 class="styleh4">Заголовок h4</h4>
<pre><i>Примечание:</i> Свойство <b>"border-width"</b> не работает, если используется в одиночку. 
Сначала задайте границы с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>
  • Пример, в котором показано, как задать свойства всех четырех сторон границы в одном объявлении. Допускается определение от одного до трех значений.
    <html>
<head>
<style type="text/css">
h1 
{
border: thin dotted #ff00ff
}
</style>
</head>

<body>
<h1>Заголовок h1</h1>
</body>

</html>
    •

    Параметры границы в CSS

    Параметры границы в CSS позволяют определить стиль и цвет рамки вокруг элемента. Если в HTML для создания границ вокруг текста использовались таблицы, то в CSS можно создавать границы, которые применимы к любому элементу. Кроме того, возможности параметров границ в CSS расширены.

    Данные параметры поддерживают следующие браузеры: Internet Explorer, Firefox, Netscape.

    Параметр Описание Значения IE F N W3C
    border Параметр для задания свойств всех четырех сторон границы в одном объявлении border-width 4 1 4 1
    border-style
    border-color
    border-bottom Параметр для задания всех свойств нижней стороны границы в одном объявлении border-bottom-width 4 1 6 1
    border-style
    border-color
    border-bottom-color Задает цвет нижней стороны границы border-color 4 1 6 2
    border-bottom-style Задает стиль нижней стороны границы border-style 4 1 6 2
    border-bottom-width Задает толщину нижней стороны границы thin 4 1 4 1
    medium
    thick
    length
    border-color Задает цвета четырех сторон границы, может иметь от одного до четырех значений color 4 1 6 1
    border-left Параметр для задания всех свойств левой стороны границы в одном объявлении border-left-width 4 1 6 1
    border-style
    border-color
    border-left-color Задает цвет левой стороны границы border-color 4 1 6 2
    border-left-style Задает стиль левой стороны границы border-style 4 1 6 2
    border-left-width Задает толщину левой стороны границы thin 4 1 4 1
    medium
    thick
    length
    border-right Параметр для задания всех свойств правой стороны границы в одном объявлении border-right-width 4 1 6 1
    border-style
    border-color
    border-right-color Задает цвет правой стороны границы border-color 4 1 6 2
    border-right-style Задает стиль правой стороны границы border-style 4 1 6 2
    border-right-width Задает толщину правой стороны границы thin 4 1 4 1
    medium
    thick
    length
    border-style Задает стили четырех сторон границы, может иметь от одного до четырех стилей none 4 1 6 1
    hidden
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
    border-top Параметр для задания всех свойств верхней стороны границы в одном объявлении border-top-width 4 1 6 1
    border-style
    border-color
    border-top-color Задает цвет верхней стороны границы border-color 4 1 6 2
    border-top-style Задает стиль верхней стороны границы border-style 4 1 6 2
    border-top-width Задает толщину верхней стороны границы thin 4 1 4 1
    medium
    thick
    length
    border-width Параметр для задания толщин четырех сторон границы в одном объявлении, может иметь от одного до четырех значений thin 4 1 4 1
    medium
    thick
    length

    Границы в CSS: подробное рассмотрение

    Параметр 'border'

    Данный параметр позволяет определить все свойства четырех сторон границы в одном объявлении. Но это свойство не может определить различные значения для каждой стороны границы, как, например, "margin" и "padding".

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    border-width Задает свойства для четырех сторон границы
    border-style
    border-color

    Примеры:

    h1
{ 
border: medium solid #FFFF00
}

h2
{ 
border: dotted green
}

    Параметр 'border-bottom'

    Этот параметр позволяет определить все свойства нижней стороны границы в одном объявлении.

    Наследование: нет.

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

    Значение Описание
    border-bottom-width Задает свойства для нижней стороны границы
    border-style
    border-color

    Примеры:

    span
{ 
border-bottom: thick solid #800080
}

li
{ 
border-bottom: dotted #800000
}

    Параметр 'border-bottom-color'

    Данный параметр задает цвет нижней границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Color Значение для цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

    Примеры:

    p
{ 
border-bottom-color: rgb(20,200,250)
}

span
{ 
border-bottom-color: blue
}

    Параметр 'border-bottom-style'

    Этот параметр задает стиль нижней границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Пример:

    p
{ 
border-bottom-style: dotted
}

    Параметр 'border-bottom-width'

    Данный параметр задает толщину нижней границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    thin Определяет тонкую нижнюю границу
    medium Определяет нижнюю границу средней толщины
    thick Определяет толстую нижнюю границу
    length Позволяет определить толщину нижней границы

    Примеры:

    p
{ 
border-bottom-width: 1px
}

p
{ 
border-bottom-width: thick
}

    Параметр 'border-color'

    Данный параметр задает цвет четырех сторон границы. Допускается определение от одного до четырех цветов. Необходимо объявлять свойство border-style перед свойством border-color, т.к. элемент должен иметь границу, прежде чем для нее будет задан цвет.

    Наследование: нет.

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

    Значение Описание
    Color Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)
    Transparent Граница является прозрачной

    Примеры:

    p {border-color: blue}
все четыре стороны границы будут синие.

p {border-color: blue yellow}
верхняя и нижняя стороны границы будут синие, 
левая и правая стороны границы будут желтые.

p {border-color: blue yellow green}
верхняя сторона граница будет синей, 
левая и правая сторона границы будут желтые, 
нижняя сторона границы будет зеленая.

p {border-color: blue yellow green red}
верхняя сторона границы будет синей, 
правая сторона границы будет желтой, 
нижняя сторона границы будет зеленой, 
левая сторона границы будет красной.

    Параметр 'border-left'

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

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    border-left-width Задает свойства левой стороны границы
    border-style
    border-color

    Примеры:

    p
{ 
border-left: medium dashed green
}

p
{ 
border-left: thin dotted #FF00FF
}

    Параметр 'border-left-color'

    Данный параметр задает цвет левой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Color Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

    Примеры:

    h1
{ 
border-left-color: green
}

h2
{ 
border-left-color: #00FF00
}

    Параметр 'border-left-style'

    Данный параметр задает стиль левой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Пример:

    p
{ 
border-left-style: dotted
}

    Параметр 'border-left-width'

    Данный параметр задает толщину левой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    thin Определяет тонкую левую сторону границы
    medium Определяет левую сторону границы средней толщины
    thick Определяет толстую левую сторону границы
    length Позволяет определить толщину левой стороны границы

    Примеры:

    p
{ 
border-left-width: 7px
}

p
{ 
border-left-width: thick
}

    Параметр 'border-right'

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

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    border-right-width Задает свойства правой стороны границы
    border-style
    border-color

    Примеры:

    h1
{ 
border-right: medium dotted #FFFF00
}

h2
{ 
border-right: thin dashed green
}

    Параметр 'border-right-color'

    Данный параметр задает цвет правой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    color Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

    Примеры:

    p
{ 
border-right-color: rgb(250,200,250)
}

p
{ 
border-right-color: blue
}

    Параметр 'border-right-style'

    Данный параметр задает стиль правой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Пример:

    p
{ 
border-right-style: dashed
}

    Параметр 'border-right-width'

    Данный параметр задает толщину правой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    thin Определяет тонкую правую сторону границы
    medium Определяет правую сторону границы средней толщины
    thick Определяет толстую правую сторону границы
    length Позволяет определить толщину правой стороны границы

    Примеры:

    h1
{ 
border-right-width: 2cm
}

h2
{ 
border-right-width: medium
}

    Параметр 'border-style'

    Этот параметр задает стиль четырех сторон границы. Позволяет определить от одного до четырех стилей.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Примеры:

    p {border-style: dashed}
все четыре стороны границы будут  штрих-пунктирными.

p {border-style: solid double}
верхняя и нижняя стороны границы будут сплошными, 
левая и правая сторона граница будут двойными.

p {border-style: solid double dotted}
верхняя сторона границы будет сплошной, 
левая и правая сторона границы будут двойными, 
нижняя сторона границы будет пунктирной.

p {border-style: dashed double dotted solid}
верхняя сторона граница будет штрих-пунктирной, 
правая сторона границы будет двойной, 
нижняя сторона границы будет пунктирной, 
левая сторона границы будет сплошной.

    Параметр 'border-top'

    Данный параметр определяет все свойства верхней стороны границы в одном объявлении.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    border-top-width Задает свойства верхней стороны границы
    border-style
    border-color

    Примеры:

    p
{ 
border-top: thick dashed green
}

p
{ 
border-top: dotted #FF0000
}

    Параметр 'border-top-color'

    Этот параметр задает цвет верхней стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    color Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

    Примеры:

    h1
{ 
border-top-color: blue
}

h2
{ 
border-top-color: rgb(200,10,250)
}

    Параметр 'border-top-style'

    Параметр задает стиль верхней стороны границы элемента.

    Наследование: нет.

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

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Примеры:

    p
{ 
border-top-style: dotted
}

    Параметр 'border-top-width'

    Данный параметр задает толщину верхней стороны границы элемента.

    Наследование: нет.

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

    Значение Описание
    thin Определяет тонкую верхнюю сторону границы
    medium Определяет верхнюю сторону границы средней толщины
    thick Определяет толстую верхнюю сторону границы
    length Позволяет определить толщину верхней стороны границы

    Примеры:

    p
{ 
border-top-width: medium
}

p
{ 
border-top-width: 1cm
}

    Параметр 'border-width'

    Данный параметр определяет в одном объявлении толщину четырех сторон границы и может иметь от одного до четырех значений.

    Наследование: нет.

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

    Значение Описание
    thin Определяет тонкую границу
    medium Определяет границы средней толщины
    thick Определяет толстую границу
    length Позволяет определить толщину границ

    Примеры:

    p {border-width: thick}
все четыре стороны границы будут толстыми. 

p {border-width: thick thin}
верхняя и нижняя стороны границы будут толстыми, 
левая и правая сторона границы будут тонкими. 

p {border-width: medium thick thin}
верхняя сторона границы будет иметь среднее значение, 
левая и правая стороны границы будут толстыми, 
нижняя сторона границы будет тонкой.

p {border-width: thick thin thin medium}
верхняя сторона границы будет толстой, 
правая сторона границы будет тонкой, 
нижняя сторона границы будет тонкой, 
левая сторона границы будет иметь среднее значение.
    Страницы:

    Параметры границ в CSS определяют рамки вокруг элементов. Рассмотрим несколько примеров использования границ.

  • Пример в котором показано, как задать стиль для четырех сторон границы.
    <html>
<head>
<style type="text/css">
pre.inset {border-style: inset}
li.outset {border-style: outset}
h1.dotted {border-style: dotted}
h2.dashed {border-style: dashed}
h3.solid {border-style: solid}
h4.double {border-style: double}
h5.groove {border-style: groove}
h6.ridge {border-style: ridge}
</style>
</head>

<body>
<pre class="inset">рамка inset </pre>

<ol>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
</ol>

<h1 class="dotted">рамка dotted</h1>

<h2 class="dashed">рамка dashed</h2>

<h3 class="solid">рамка solid</h3>

<h4 class="double">рамка double</h4>

<h5 class="groove">рамка groove </h5>

<h6 class="ridge">рамка ridge</h6>

</body>

</html>
  • Пример в котором показано, как задать различные стили границы на каждой стороне элемента.
    <html>
<head>
<style type="text/css">
h1.styleh1 {border-style: dashed ridge solid}
h2.styleh2 {border-style: solid dashed}
h3.styleh3 {border-style: dashed groove}
h4.styleh4 {border-style: double solid dashed groove}
</style>
</head>

<body>
<h1 class="styleh1">заголовок заголовок заголовок</h1>

<h2 class="styleh2"> заголовок заголовок заголовок </h2>

<h3 class="styleh3"> заголовок заголовок заголовок </h3>

<h4 class="styleh4"> заголовок заголовок заголовок </h4>
</body>

</html>
  • Пример, в котором показано, как задать цвет границы — она может иметь свой цвет для каждой стороны.
    <html>
<head>

<style type="text/css">
h1.styleh1
{
border-style: dashed;
border-color: green
}
h2.styleh2
{
border-style: dotted;
border-color: #ff00ff blue
}
h3.styleh3
{
border-style: solid;
border-color: red yellow rgb(12,200,30)
}
h4.styleh4
{
border-style: dashed;
border-color: green blue red yellow
}
</style>

</head>

<body>

<h1 class="styleh1">одноцветная рамка</h1>

<h2 class="styleh2">рамка из двух цветов</h2>

<h3 class="styleh3">рамка из трех цветов</h3>

<h4 class="styleh4">рамка из четырех цветов</h4>

<pre><i>Внимание:</i> Свойство<b>"border-color"</b> не работает, 
  если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>

</body>
</html>
  • Пример, в котором показано, как задать толщину нижней стороны границы.
    <html>
<head>
<style type="text/css">
h1 
{
border-style: dashed;
border-bottom-width: 7px
}
</style>
</head>

<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Параметр <b>"border-bottom-width"</b> не работает, 
  если используется в одиночку.
      Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>

</html>
  • Пример, в котором показано, как задать толщину левой стороны границы.
    <html>
<head>
<style type="text/css">
h2 
{
border-style: dotted;
border-left-width: 7px
}
</style>
</head>

<body>
<h2>Внимание</h2>
<pre><i>Внимание:</i> Свойство <b>"border-left-width"</b> не работает, 
  если используется в одиночку.
Сначала задайте границу с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>
    •
  • Пример, в котором показано, как задать толщину правой стороны границы.
    <html>
<head>
<style type="text/css">
h1 
{
border-style: dashed;
border-right-width: 7px
}
</style>
</head>

<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Свойство <b>"border-right-width"</b> не работает, если используется в одиночку.
Сначала задайте границу с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>
  • Пример, в котором показано, как задать толщину верхней стороны границы.
    <html>
<head>
<style type="text/css">
h4
{
border-style: dotted;
border-top-width: 7px
}
</style>
</head>

<body>
<h4>заголовок h4</h4>
<pre><i>Внимание:</i> Свойство <b>"border-top-width"</b> не работает, 
   если используется в одиночку.
Сначала задайте границу с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>
  • Пример, в котором показано, как задать все свойства для нижней стороны границы в одном объявлении.
    <html>
<head>
<style type="text/css">
h1 
{
border-bottom: thick double blue
}
</style>
</head>

<body>
<h1> Заголовок h1.</h1>
</body>

</html>
  • Пример, в котором показано, как задать все свойства для левой стороны границы в одном объявлении.
    <html>
<head>
<style type="text/css">
pre 
{
border-left: thin ridge #f0ffff
}
</style>
</head>

<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>

</html>
  • Пример, в котором показано, как задать все свойства для правой стороны границы в одном объявлении.
    <html>
<head>
<style type="text/css">
h4 
{
border-right: thick solid rgb(0,200,200)
}
</style>
</head>

<body>
<h4>Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4 
Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4</h4>
</body>

</html>
  • Пример, в котором показано, как задать все свойства для верхней стороны границы в одном объявлении.
    <html>
<head>
<style type="text/css">
pre
{
border-top: thin dashed yellow
}
</style>
</head>

<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>

</html>
  • Пример, в котором показано, как задать толщину всех четырех сторон границы в одном объявлении. Допускается определение от одного до четырех значений.
    <html>
<head>
<style type="text/css">
h1.styleh1 
{
border-style: dotted;
border-width: 7px 12px
}
h2.styleh2 
{
border-style: dashed;
border-width: 3px 6px 8px
}
h3.styleh3 
{
border-style: outset;
border-width: 7px 
}
h4.styleh4 
{
border-style: inset;
border-width: 3px 6px 8px thick
}
</style>
</head>

<body>
<h1 class="styleh1">Заголовок h1</h1>
<h2 class="styleh2">Заголовок h2</h2>
<h3 class="styleh3">Заголовок h3</h3>
<h4 class="styleh4">Заголовок h4</h4>
<pre><i>Примечание:</i> Свойство <b>"border-width"</b> не работает, если используется в одиночку. 
Сначала задайте границы с помощью  свойства <b>"border-style"</b>.</pre>
</body>

</html>
  • Пример, в котором показано, как задать свойства всех четырех сторон границы в одном объявлении. Допускается определение от одного до трех значений.
    <html>
<head>
<style type="text/css">
h1 
{
border: thin dotted #ff00ff
}
</style>
</head>

<body>
<h1>Заголовок h1</h1>
</body>

</html>
    •

    Параметры границы в CSS

    Параметры границы в CSS позволяют определить стиль и цвет рамки вокруг элемента. Если в HTML для создания границ вокруг текста использовались таблицы, то в CSS можно создавать границы, которые применимы к любому элементу. Кроме того, возможности параметров границ в CSS расширены.

    Данные параметры поддерживают следующие браузеры: Internet Explorer, Firefox, Netscape.

    Параметр Описание Значения IE F N W3C
    border Параметр для задания свойств всех четырех сторон границы в одном объявлении border-width 4 1 4 1
    border-style
    border-color
    border-bottom Параметр для задания всех свойств нижней стороны границы в одном объявлении border-bottom-width 4 1 6 1
    border-style
    border-color
    border-bottom-color Задает цвет нижней стороны границы border-color 4 1 6 2
    border-bottom-style Задает стиль нижней стороны границы border-style 4 1 6 2
    border-bottom-width Задает толщину нижней стороны границы thin 4 1 4 1
    medium
    thick
    length
    border-color Задает цвета четырех сторон границы, может иметь от одного до четырех значений color 4 1 6 1
    border-left Параметр для задания всех свойств левой стороны границы в одном объявлении border-left-width 4 1 6 1
    border-style
    border-color
    border-left-color Задает цвет левой стороны границы border-color 4 1 6 2
    border-left-style Задает стиль левой стороны границы border-style 4 1 6 2
    border-left-width Задает толщину левой стороны границы thin 4 1 4 1
    medium
    thick
    length
    border-right Параметр для задания всех свойств правой стороны границы в одном объявлении border-right-width 4 1 6 1
    border-style
    border-color
    border-right-color Задает цвет правой стороны границы border-color 4 1 6 2
    border-right-style Задает стиль правой стороны границы border-style 4 1 6 2
    border-right-width Задает толщину правой стороны границы thin 4 1 4 1
    medium
    thick
    length
    border-style Задает стили четырех сторон границы, может иметь от одного до четырех стилей none 4 1 6 1
    hidden
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
    border-top Параметр для задания всех свойств верхней стороны границы в одном объявлении border-top-width 4 1 6 1
    border-style
    border-color
    border-top-color Задает цвет верхней стороны границы border-color 4 1 6 2
    border-top-style Задает стиль верхней стороны границы border-style 4 1 6 2
    border-top-width Задает толщину верхней стороны границы thin 4 1 4 1
    medium
    thick
    length
    border-width Параметр для задания толщин четырех сторон границы в одном объявлении, может иметь от одного до четырех значений thin 4 1 4 1
    medium
    thick
    length

    Границы в CSS: подробное рассмотрение

    Параметр 'border'

    Данный параметр позволяет определить все свойства четырех сторон границы в одном объявлении. Но это свойство не может определить различные значения для каждой стороны границы, как, например, "margin" и "padding".

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    border-width Задает свойства для четырех сторон границы
    border-style
    border-color

    Примеры:

    h1
{ 
border: medium solid #FFFF00
}

h2
{ 
border: dotted green
}

    Параметр 'border-bottom'

    Этот параметр позволяет определить все свойства нижней стороны границы в одном объявлении.

    Наследование: нет.

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

    Значение Описание
    border-bottom-width Задает свойства для нижней стороны границы
    border-style
    border-color

    Примеры:

    span
{ 
border-bottom: thick solid #800080
}

li
{ 
border-bottom: dotted #800000
}

    Параметр 'border-bottom-color'

    Данный параметр задает цвет нижней границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Color Значение для цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

    Примеры:

    p
{ 
border-bottom-color: rgb(20,200,250)
}

span
{ 
border-bottom-color: blue
}

    Параметр 'border-bottom-style'

    Этот параметр задает стиль нижней границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Пример:

    p
{ 
border-bottom-style: dotted
}

    Параметр 'border-bottom-width'

    Данный параметр задает толщину нижней границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    thin Определяет тонкую нижнюю границу
    medium Определяет нижнюю границу средней толщины
    thick Определяет толстую нижнюю границу
    length Позволяет определить толщину нижней границы

    Примеры:

    p
{ 
border-bottom-width: 1px
}

p
{ 
border-bottom-width: thick
}

    Параметр 'border-color'

    Данный параметр задает цвет четырех сторон границы. Допускается определение от одного до четырех цветов. Необходимо объявлять свойство border-style перед свойством border-color, т.к. элемент должен иметь границу, прежде чем для нее будет задан цвет.

    Наследование: нет.

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

    Значение Описание
    Color Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)
    Transparent Граница является прозрачной

    Примеры:

    p {border-color: blue}
все четыре стороны границы будут синие.

p {border-color: blue yellow}
верхняя и нижняя стороны границы будут синие, 
левая и правая стороны границы будут желтые.

p {border-color: blue yellow green}
верхняя сторона граница будет синей, 
левая и правая сторона границы будут желтые, 
нижняя сторона границы будет зеленая.

p {border-color: blue yellow green red}
верхняя сторона границы будет синей, 
правая сторона границы будет желтой, 
нижняя сторона границы будет зеленой, 
левая сторона границы будет красной.

    Параметр 'border-left'

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

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    border-left-width Задает свойства левой стороны границы
    border-style
    border-color

    Примеры:

    p
{ 
border-left: medium dashed green
}

p
{ 
border-left: thin dotted #FF00FF
}

    Параметр 'border-left-color'

    Данный параметр задает цвет левой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Color Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

    Примеры:

    h1
{ 
border-left-color: green
}

h2
{ 
border-left-color: #00FF00
}

    Параметр 'border-left-style'

    Данный параметр задает стиль левой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Пример:

    p
{ 
border-left-style: dotted
}

    Параметр 'border-left-width'

    Данный параметр задает толщину левой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    thin Определяет тонкую левую сторону границы
    medium Определяет левую сторону границы средней толщины
    thick Определяет толстую левую сторону границы
    length Позволяет определить толщину левой стороны границы

    Примеры:

    p
{ 
border-left-width: 7px
}

p
{ 
border-left-width: thick
}

    Параметр 'border-right'

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

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    border-right-width Задает свойства правой стороны границы
    border-style
    border-color

    Примеры:

    h1
{ 
border-right: medium dotted #FFFF00
}

h2
{ 
border-right: thin dashed green
}

    Параметр 'border-right-color'

    Данный параметр задает цвет правой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    color Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

    Примеры:

    p
{ 
border-right-color: rgb(250,200,250)
}

p
{ 
border-right-color: blue
}

    Параметр 'border-right-style'

    Данный параметр задает стиль правой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Пример:

    p
{ 
border-right-style: dashed
}

    Параметр 'border-right-width'

    Данный параметр задает толщину правой стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    thin Определяет тонкую правую сторону границы
    medium Определяет правую сторону границы средней толщины
    thick Определяет толстую правую сторону границы
    length Позволяет определить толщину правой стороны границы

    Примеры:

    h1
{ 
border-right-width: 2cm
}

h2
{ 
border-right-width: medium
}

    Параметр 'border-style'

    Этот параметр задает стиль четырех сторон границы. Позволяет определить от одного до четырех стилей.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Примеры:

    p {border-style: dashed}
все четыре стороны границы будут  штрих-пунктирными.

p {border-style: solid double}
верхняя и нижняя стороны границы будут сплошными, 
левая и правая сторона граница будут двойными.

p {border-style: solid double dotted}
верхняя сторона границы будет сплошной, 
левая и правая сторона границы будут двойными, 
нижняя сторона границы будет пунктирной.

p {border-style: dashed double dotted solid}
верхняя сторона граница будет штрих-пунктирной, 
правая сторона границы будет двойной, 
нижняя сторона границы будет пунктирной, 
левая сторона границы будет сплошной.

    Параметр 'border-top'

    Данный параметр определяет все свойства верхней стороны границы в одном объявлении.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    border-top-width Задает свойства верхней стороны границы
    border-style
    border-color

    Примеры:

    p
{ 
border-top: thick dashed green
}

p
{ 
border-top: dotted #FF0000
}

    Параметр 'border-top-color'

    Этот параметр задает цвет верхней стороны границы элемента.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    color Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

    Примеры:

    h1
{ 
border-top-color: blue
}

h2
{ 
border-top-color: rgb(200,10,250)
}

    Параметр 'border-top-style'

    Параметр задает стиль верхней стороны границы элемента.

    Наследование: нет.

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

    Значение Описание
    None Определяет отсутствие границы
    Hidden То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
    Dotted Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
    Dashed Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
    solid Определяет сплошную границу
    double Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
    groove Определяет 3D-границу (groove). Результат зависит от значения цвета границы
    ridge Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
    inset Определяет 3D-границу (inset). Результат зависит от значения цвета границы
    outset Определяет 3D-границу (outset). Результат зависит от значения цвета границы

    Примеры:

    p
{ 
border-top-style: dotted
}

    Параметр 'border-top-width'

    Данный параметр задает толщину верхней стороны границы элемента.

    Наследование: нет.

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

    Значение Описание
    thin Определяет тонкую верхнюю сторону границы
    medium Определяет верхнюю сторону границы средней толщины
    thick Определяет толстую верхнюю сторону границы
    length Позволяет определить толщину верхней стороны границы

    Примеры:

    p
{ 
border-top-width: medium
}

p
{ 
border-top-width: 1cm
}

    Параметр 'border-width'

    Данный параметр определяет в одном объявлении толщину четырех сторон границы и может иметь от одного до четырех значений.

    Наследование: нет.

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

    Значение Описание
    thin Определяет тонкую границу
    medium Определяет границы средней толщины
    thick Определяет толстую границу
    length Позволяет определить толщину границ

    Примеры:

    p {border-width: thick}
все четыре стороны границы будут толстыми. 

p {border-width: thick thin}
верхняя и нижняя стороны границы будут толстыми, 
левая и правая сторона границы будут тонкими. 

p {border-width: medium thick thin}
верхняя сторона границы будет иметь среднее значение, 
левая и правая стороны границы будут толстыми, 
нижняя сторона границы будет тонкой.

p {border-width: thick thin thin medium}
верхняя сторона границы будет толстой, 
правая сторона границы будет тонкой, 
нижняя сторона границы будет тонкой, 
левая сторона границы будет иметь среднее значение.
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^