Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 6:

Границы в CSS

Параметр '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
}
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Антон Чернятьев
Антон Чернятьев
Россия, красноярск
Иван Торгашев
Иван Торгашев
Россия, г. Миасс