Главная » Языки программирования

Css block border style

Содержание
  1. CSS border-block Property
  2. Definition and Usage
  3. Browser Support
  4. CSS Syntax
  5. Property Values
  6. More Examples
  7. With writing-mode property
  8. CSS border-block-style Property
  9. Browser Support
  10. border
  11. Синтаксис
  12. Значения
  13. Обычный синтаксис
  14. Примеры
  15. HTML
  16. CSS
  17. Результат
  18. Спецификация
  19. Совместимость браузеров
  20. Также смотрите
  21. Found a content problem with this page?

CSS border-block Property

Set the style, color and width of the borders for different elements in the block direction:

h1 <
border-block: 5px solid red;
>

h2 border-block: 4px dotted blue;
>

Definition and Usage

The border-block property is a shorthand property for these properties:

If values for color or width are omitted, default values will be used.

The CSS border-block property is very similar to CSS property border , but the border-block property is dependent on block direction.

Note: The related CSS property writing-mode defines block direction. This affects where the start and end of a block is and the result of the border-block property. For pages in English, inline direction is left to right and block direction is downward.

Default value: medium none color
Inherited: no
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.borderBlock=»dashed hotpink 10px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value Description Demo
border-block-width Specifies the width of the border in the block direction. Default value is «medium» Demo ❯
border-block-style Specifies the style of the border in the block direction. Default value is «none» Demo ❯
border-block-color Specifies the color of the border in the block direction. Default value is the color of the text Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

With writing-mode property

The position of the borders at the start and end in the block direction is affected by the writing-mode property:

Источник

CSS border-block-style Property

The border-block-style property sets the style of an element’s borders in the block direction.

Values for the border-block-style property can be set in different ways:

If the border-block-style property has two values:

  • border-block-style: dashed dotted;
    • border style at block start is dashed
    • border style at block end is dotted

    If the border-block-style property has one value:

    The CSS border-block-style property is very similar to CSS properties border-bottom-style , border-left-style , border-right-style and border-top-style , but the border-block-style property is dependent on block direction.

    Note: The related CSS property writing-mode defines block direction. This affects where the start and end of a block is and the result of the border-block-style property. For pages in English, inline direction is left to right and block direction is downward.

    Default value: none
    Inherited: no
    Animatable: no. Read about animatable
    Version: CSS3
    JavaScript syntax: object.style.borderBlockStyle=»dotted» Try it

    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    Источник

    border

    Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, border не может быть использован для указания пользовательского значения border-image (en-US), но вместо этого устанавливает его в начальное значение, т.е. none .

    border: 1px; border: 2px dotted; border: medium dashed green;

    Примечание: Рекомендуется использовать border , когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width , border-style (en-US), и border-color (en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

    Синтаксис

    Свойство border указывается используя одно или более значений , , и указанных ниже.

    Значения

    Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width .

    Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style (en-US).

    Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).

    Обычный синтаксис

    border =
    || (en-US)
    || (en-US)

    =
    | (en-US)
    thin | (en-US)
    medium | (en-US)
    thick

    =
    none | (en-US)
    hidden | (en-US)
    dotted | (en-US)
    dashed | (en-US)
    solid | (en-US)
    double | (en-US)
    groove | (en-US)
    ridge | (en-US)
    inset | (en-US)
    outset

    Примеры

    HTML

    div class="fun-border">Look at my borders.div> p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!p> style contenteditable> .fun-border  border: 2px solid red; > style>

    CSS

    style  display: block; border: 1px dashed black; >

    Результат

    Спецификация

Оцените статью
© 2024 Программирование