border-left-style в CSS


Содержание

border-left-style

Свойство CSS border-left-style используется для создания рамки в левой части элемента (левой границы) и одновременного указания ее стиля (вида).

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

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства border-left-style являются ключевые слова задающие стиль рамки.

Возможные значения и их описание

Значение Описание Пример
none Рамка убрана, если указана толщина рамки, то она становится равной нулю (0). none
hidden Скрывает рамку. То же, что и none за исключением случая с ячейками таблицы, к которым применено свойство border-collapse: collapse . Тогда общая для двух ячеек граница не будет отображена вне зависимости от того, какая рамка имеется у соседней ячейки. hidden
dotted Рамка, состоящая из точек.
dashed Пунктирная рамка из коротких отрезков.
solid Сплошная линия.
double Двойная сплошная линия.
groove Вид рамки вырезанной в поверхности.
ridge Противоположно groove. Вид выступающей над поверхностью рамки.
inset Рамка, как будто блок вдавили в поверхность.
outset Противоположно inset. Рамка, будто блок выдавили из поверхности.
inherit наследует значение border-left-style от родительского элемента.

Процентная запись: не существует.

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

По одной стороне рамки тяжело понять ее внешний вид, для этого лучше посмотреть свойство border-style, где показаны стили рамок со всеми сторонами.

Синтаксис

Пример CSS: использование border-left-style

Результат. Использование свойства CSS border-left-style.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значения inherit и hidden .

свойство border-left-style

Свойство border-left-style определяет стиль левой границы блока. Стиль левой границы рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit.

Доступные стили:

Для стилей groove, ridge, inset, outset в спецификации не утвержден метод расчета цвета, поэтому в разных браузера, рамки с такими стилями могут немного визуально отличаться (см. border-style — примеры). Так же в спецификации не обсуждается размер точек, штрихов и промежутков между ними для стилей dotted и dashed, рекомендуется только выбирать такие размеры, чтобы углы рамки смотрелись симметрично, кроме этого в браузерах на движках Trident (Internet Explorer) и Gecko (Firefox) стиль dotted отображается кружками, а в браузерах на движках WebKit (Chrome,Safari) и Presto (Opera) квадратиками.

Специфические стили:

Данные стили доступны только в определенных версиях браузеров и не являются часть стандарта CSS.

CSS border-left-style property

border-left-style property

CSS border-left-style property sets the style of the line of a box’s left border.

Syntax:

Values

style: Style of the left border of a box. The following table shows the values :

value Description
none No style is set. The width of the border is zero.
hidden No style is set. The width of the border is zero, except border of table elements (e.g. td, tr).
dotted Border is a chain of dots.
dashed Border is a chain of small dashes.
solid The border is made up of a single line segment.
double The border is made up of a two line segments. In this case, the width of the border is calculated by summing up the width of the lines and the space between two lines.
groove As if the border is carved.
ridge As if the border is coming out of the medium on which it is displayed.
inset As if the box is embedded.
inset As if the box is carved.

inherit : If set, the associated element takes computed value of it’s parent element’s border-left-style property.

Initial value

Applies to

border-left-style property can be applied to all HTML elements.

Inherited

Percentages

Media

Computed value

Browser compatibility

Browser Version
Internet Explorer 4.0 and above
Firefox (Gecko) 1.0 and above
Opera 3.5 and above
Safari (WebKit) 1.0 and above

Example of border-left-style property

CSS code:

HTML code:

View this example in a separate browser window

Все о свойстве border

Основы

Всем знакомо такое использование:

Это однопиксельная сплошная рамка. Немного меняем синтаксис:

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Но так это реализовать проще и правильнее:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

А вот как можно нарисовать лимон средствами CSS:

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

Или более подробно:

Outline

Самый популярный способ создания двойной границы — это параметр outline:

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

Псевдоэлементы

Можно использовать такую конструкцию:


Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Еще один способ, с применением теней:

Изменение углов

К параметру border-radius можно применять два значения, используя «/», например:

Это то же самое, что:

Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:

CSS фигуры

В следующих примерах предполагается такая разметка:

И такой базовый css:

Илон Маск рекомендует:  WideChar - Тип Delphi

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

Или то же самое:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Наша базовая разметка:

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

Еще один пример нестандартного использования границ:

Свойство CSS border-left-style

p
<
border-style:solid;
border-left-style:dotted;
>

Описание и использование

Свойство CSS border-left-style задает стиль левого бордюра элемента.

Значение по умолчанию нет
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderLeftStyle=»dotted»

Поддержка в браузерах

Свойство border-left-style поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit или hidden.

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

Свойство border HTML позволяет определять стиль, ширину и цвет границы элемента. Границы элементов могут выполнять как декоративную, так и практическую функцию.

Стиль границы

Свойство border-style позволяет определить тип ( стиль ) границы.

Это свойство принимает разные значения :

  • dotted – граница в точку;
  • dashed – граница в штрих;
  • solid – цельная граница;
  • double – двойная граница;
  • groove – трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • ridge — трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • inset – трёхмерная утопленная граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • outset — трёхмерная выпуклая граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • none – отключение;
  • hidden – скрытые границы.

У свойства HTML border style может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style !

Border Width

Свойство border-width определяет ширину границы по любой из четырех сторон элемента.

Ширину можно указывать как в единицах измерения ( px, pt, cm, em и т. д. ), так и с помощью ключевых слов: thin , medium или thick .

У свойства border-width может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Border Color

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

Цвет можно указывать несколькими способами :

  • Названием – вписывается название цвета ( например, red );
  • Hex – указывается hex-значение цвета ( например, #FF0000 );
  • RGB – указывается RGB-значение цвета ( например, rgb(255,0,0) );
  • transparent ( прозрачная ).

У свойства border-color может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Если не выставить свойство border-color , то границы будут наследовать цвет элемента.

Стилизация границ по-отдельности

В CSS есть свойства border HTML для определения стиля каждой стороны элемента ( top, right, bottom и left ).

Подобного результата можно добиться и следующим методом:

Как это работает

Если у свойства HTML border style будет четыре значения:

  • border-style: dotted solid double dashed ;
  • верхняя граница имеет значение dotted ;
  • правая граница имеет значение solid ;
  • нижняя граница имеет значение double ;
  • левая граница имеет значение dashed .

Если у border-style будет три значения:

  • border-style: dotted solid double ;
  • верхняя граница имеет значение dotted ;
  • правая и левая границы имеют значение solid ;
  • нижняя граница имеет значение double .

Если у border-style будет два значения:

  • border-style: dotted solid ;
  • верхняя и нижняя границы имеют значение dotted ;
  • правая и левая границы имеют значение solid .

Если у HTML border style будет одно значение:

  • border-style: dotted ;
  • то все четыре границы будут иметь значение dotted .

В примерах, приведенных выше, мы использовали свойство border-style . Но учтите, что те же правила применения касаются и border-width , и border-color .

Сокращенное свойство border

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

  • border-width ;
  • border-style ( обязательно );
  • border-color .

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

Стиль рамки таблицы в HTML и CSS

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

Содержание

[править] Пример простой таблицы


  • — тег, который открывает и завершает (

    ) описание таблицы.

  • border=»1″ — параметр, который включает отображение рамки (если этого параметра нет, и не назначен стиль CSS, то рамка у таблицы не отображается). [1]
  • — описывает заголовок таблицы (необязателен). [2]
  • — описывает строку (row) таблицы, внутри которой находятся ячейки ( и

    ).
  • — описывает ячейку-заголовок таблицы. По умолчанию такие ячейки выделяются жирным шрифтом и центровкой.
  • — описывает значение ячейки таблицы.
  • border=»1″ — установка толщины рамки. [3]
  • cellpadding=»5″ — отступы от рамки до текста внутри таблицы. [4]
  • border-collapse: collapse; — стиль CSS, который убирает задвоенность рамки.
  • border: 1px sol >[5] Для этой же цели можно использовать атрибут HTML bgcolor. [6]
  • align=»bottom» — перемещение заголовка таблицы вниз (стиль «caption-s >[7] не отрабатывает в IE). [8]

Пример правильно отрабатывает в MediaWiki и в LiveJournal.

[править] Использование класса CSS

Технология CSS позволяет приписать определенный стиль сразу всем таблицам документа (тег ), всего сайта (тег ), либо только для некоторых таблиц, указав для них имя класса (атрибут >[9]

Например, в CSS-описаниях движка MediaWiki, начиная с версии r48842, есть готовый стиль для таблиц. [10] Его можно использовать следующим образом:

[править] Назначение внешнего вида рамки

За это отвечают атрибуты HTML для тега :

Аналогично работает стиль border-width, однако рамка не отображается, если не установлен отличный от нуля атрибут border или стиль border-style. При одновременной установке толщины при помощи border-width и border, приоритет имеет border-width.

Можно указать от 1 до 4 значений толщины. [16]

[править] Цвет рамки

Цвет рамки можно установить при помощи атрибута bordercolor тега (отсутствует в стандарте HTML 4.01 и не поддерживается браузером Opera). [17] [18]

Для назначения цвета рамке имеется CSS-стиль border-color.

Это можно сделать также в одном выражении border-color, перечислив цвета через пробел (сверху по часовой стрелке):

Для указания цветов можно использовать шестнадцатеричные значения наподобие #aabbcc, см. wr:Цвета в HTML.

[править] Стиль рамки

Для назначения стиля рамки используется CSS-атрибут border-style.

При единичной толщине рамки в Internet Explorer версий 6 и ниже имеется ошибка для стиля dotted (он отображается как dashed): [19]

Для назначения разных стилей четырём сторонам рамки можно перечислить стили через пробел (сверху по часовой стрелке) в выражении border-style или использовать свойства border-bottom-style, border-top-style, border-left-style, border-right-style.

[править] Внутренняя и внешняя рамки

У таблицы, в общем случае, есть несколько рамок: это внешняя рамка таблицы и внутренние рамки ячеек. Их можно слить в одну рамку при помощи параметра CSS border-collapse (см. ниже), но если этого не сделано, то таблица и ее описание выглядят следующим образом:

В этом примере внешней рамке таблицы, рамке ячеек и рамке заголовков назначены различные цвета (аналогично можно назначать и разные стили).

[править] Расстояние между ячейками

Расстоянием между ячейками в показанном выше случае можно управлять при помощи атрибута тега cellspacing или атрибута стиля border-spacing (не работает в IE). [20]

При замере оказывается, что эти расстояния действительно составляют указанное число пикселей, причём, во всех трех браузерах (IE, Opera, Firefox).

[править] Объединённая рамка

Чтобы объединить смежные линии, используют атрибут стиля CSS border-collapse: collapse.

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

Однако, если внешнюю линию (прописанную для тега ) сделать более толстой, то картина меняется на следующую:

[править] Проблемы с назначением стиля внутренней рамки

Предположим, что мы хотим прописать чёрную тонкую рамку всем ячейкам таблицы, используя стиль border: 1px solid black к тегу .

К сожалению, разные браузеры «понимают» под этим разное: либо стиль внешней рамки (не включая внутренние линии таблицы), либо стиль вообще всех линий. Для назначения точного стиля внутренних рамок, который работает во всех браузерах, требуется описать его для внутренних ячеек ( и ). Это удобнее всего сделать в CSS-описании, при условии, что есть доступ к стилям CSS.

[править] Таблицы без рамки

Возможны таблицы совсем без рамки, с назначением только цвета фона у ячеек.

Пример правильно работает в MediaWiki и LiveJournal.

[править] Отрисовка рамок таблицы только вокруг групп

При помощи атрибута rules=»groups» тега можно нарисовать рамки вокруг групп, заданных тегами , , , или . Значение rules=»cols» или rules=»rows» тега позволяет отобразить рамку, соответственно, только вокруг колонок или строк.

[править] Расстояние от текста внутри таблицы до рамки

Для этого служит параметр CSS padding для содержимого ячейки , например: [21]

Для всей таблицы ( ) этот атрибут стиля «отдаляет» внешнюю рамку от внутренних ячеек (для IE это не работает).

Чтобы назначить отступ от внутреннего текста до рамки всем ячейкам, нужно использовать атрибут cellpadding тега :

border-left-style

The border-left-style property is used to specify the line style of the left border of an element (solid, double, dashed, etc.), unless there is a border image set.

Official Syntax

  • Syntax:
  • Initial: none
  • Applies To: all elements
  • Animatable: no
  • Values

    Displays no border. Color and width set on the border will be ignored. The border width value will be `0` unless there’s a border image set.

    In case of table cell and border collapsing, the none value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.

    Similar to none , it displays no border. Color and width set on the border will be ignored. The border width value will be `0` unless there’s a border image set.

    In case of table cell and border collapsing, the hidden value has the highest priority: it means that if any other conflicting border is set, it won’t be displayed.

    dotted Displays a border as a set of rounded dots. The radius of the dots is equal to half of the width of the border. dashed Displays a border as a series of square-ended dashes. solid Displays a border as a solid straight line. double Displays two parallel solid lines with some space between them. The thickness of the lines is not specified, but the sum of the lines and the space must equal to the value of the border-left-width property’s value. groove The displayed border looks as if it were carved in the canvas. This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the color specified using the border-left-color property. ridge The border looks as if it were coming out of the canvas in a 3D effect. It is the opposite of the effect achieved by the groove value. inset

    Displays a border that makes the element look as if it is “sunken” or embedded into the page.

    When applied to a table cell with border-collapse set to collapsed, this value behaves like groove .

    Displays a border that makes the element look as if it is embossed with a 3D effect. It has the opposite of the effect achieved by the inset property.

    When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge .

    Notes

    The border style value can also be inherited from the element’s parent’s border style property.

    The following image shows the result of applying any of the above styles to an element’s border.

    The rendering of the predefined border styles.

    Not all browsers may render the styles the same way. Chrome, for instance, currently renders the dots as rectangular dots not circular ones.

    The specification does not specify the amount of spacing between the dots and the dashes. Browser implementations are encouraged to choose a spacing that makes the corners symmetrical.

    The specification also does not define how borders of different styles should be joined in the corner. Also note that rounded corners may cause the corners and the contents to overlap, if the padding is less than the radius of the corner specified using the border-radius property.

    The color of borders drawn for values of groove , ridge , inset , and outset depends on the element’s border color properties, but browsers may choose their own algorithm to calculate the actual colors used. For instance, if the border-left-color has the value silver , then a browser could use a gradient of colors from white to dark gray to indicate a sloping border.

    Examples

    The following are all valid border-left-style values set on an element. The element’s border width and border color are also set using the border-left-width and border-left-color respectively.

    Live Demo

    Have a look at the live demo:


    Browser Support

    The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

    Further Reading

    Written by Sara Soueidan. Last updated February 4, 2015 at 2:37 pm by Mary Lou.

    Do you have a suggestion, question or want to contribute? Submit an issue.

    Collective #563

    November 7, 2020

    Game Off 2020 * Pure CSS Lace * The Svelte Handbook * GraphQL Crash Course * React Query.

    Collective #562

    October 31, 2020

    Lesser Known Coding Fonts * Full Stack Authentication * Neural Synesthesia * Glaze * Free for devs.

    Как сделать бордюр или рамку вокруг элемента HTML, CSS свойство border

    Очень часто при разработке сайтов бывает необходимо на какой-либо странице размещать элементы, которые должны иметь бордюры или рамки. Эту задачу можно решить при помощи специального CSS свойства – border. Оно позволяет не только задать бордюр, но и гибко настроить его.

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

    Какие есть CSS свойства из семейства border? Список приводится ниже:

    • border-bottom — управляет отображением только нижнего бордюра;
    • border-bottom-color – задает цвет нижнего бордюра;
    • border-bottom-left-radius — задает радиус скругления нижнего левого угла бордюра;
    • border-bottom-right-radius — задает радиус скругления нижнего правого угла бордюра;
    • border-bottom-style – задает стиль отображения нижнего бордюра;
    • border-bottom-width – задает ширину нижнего бордюра;
    • border-collapse — задает, как отображать границы вокруг ячеек таблицы, значения: collapse, separate, inherit;
    • border-color – задает цвет бордюра;
    • border-image – позволяет задать рисунок в качестве фона бордюра;
    • border-left — управляет отображением только левого бордюра;
    • border-left-color — задает цвет левого бордюра;
    • border-left-style — задает стиль отображения левого бордюра;
    • border-left-width — задает ширину левого бордюра;
    • border-radius – задает радиус скругления углов бордюра;
    • border-right — управляет отображением только правого бордюра;
    • border-right-color — задает цвет правого бордюра;
    • border-right-style — задает стиль отображения правого бордюра;
    • border-right-width — задает ширину правого бордюра;
    • border-spacing — устанавливает расстояние между границами ячеек в таблице;
    • border-style – задает стиль отображения бордюра, значения: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit;
    • border-top — управляет отображением только верхнего бордюра;
    • border-top-color — задает цвет верхнего бордюра;
    • border-top-left-radius — задает радиус скругления верхнего левого угла бордюра;
    • border-top-right-radius — задает радиус скругления верхнего правого угла бордюра;
    • border-top-style — задает стиль отображения верхнего бордюра;
    • border-top-width — задает ширину верхнего бордюра;
    • border-width – задает ширину бордюра.

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

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

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

    Свойство border: краткая информация

    Значение по умолчанию Зависит от элемента
    Применяется К любым элементам
    Наследуется Нет
    Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-border

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

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

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

    Подумайте, как при помощи 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 — выдавленная граница.

    Примеры того, как они выглядят.

    Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.

    Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

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

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

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

    Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.

    Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

    • thin — тонкая граница;
    • medium — средняя толщина;
    • thick — толстая граница;

    Свойство border-color. Цвет границы.

    Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье «Цвета в CSS», а именно:

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

    Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

    Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

    Вот код, который рисует такую фигуру, только побольше размером:

    Установка значений для сторон отдельно

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

    • 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 — задаёт стиль левой границы элемента.

    Пример использования этих свойств:

    Свойство border-radius. Округление углов границы.

    Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

    Значениями могут быть любые числа, используемые в CSS.

    Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:

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

    Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

    Табл. Свойство border-radius

    Число значений Результат
    1 Радиус указывается для всех углов блока.
    2 Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла.
    3 Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка.
    4 По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.

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

    Илон Маск рекомендует:  Что такое код imap_unsubscribe
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL