Ви читаєте англійську версію цього вмісту, бо ще не існує перекладу для цієї мови. Допоможіть нам перекласти цю статтю!
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The border-inline-start-color
CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color
, border-right-color
, border-bottom-color
, or border-left-color
property depending on the values defined for writing-mode
, direction
, and text-orientation
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
border-inline-start-color: red; border-inline-start-color: #ee4141;
Related properties are border-block-start-color
, border-block-end-color
, and border-inline-end-color
, which define the other border colors of the element.
Initial value | currentcolor |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Computed value | computed color |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Values
<'color'>
- The color of the border. See
color
.
Formal syntax
<'border-top-color'>
Example
HTML
<div> <p class="exampleText">Example text</p> </div>
CSS
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; border: 10px solid blue; border-inline-start-color: red; }
Specification
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'border-inline-start-color' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-inline-start-color | Chrome Full support 69 | Edge No support No | Firefox
Full support
41
| IE No support No | Opera Full support 56 | Safari Full support 12.1 | WebView Android Full support 69 | Chrome Android Full support 69 | Firefox Android
Full support
41
| Opera Android Full support 48 | Safari iOS Full support 12.2 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
See also
- This property maps to one of the physical border properties:
border-top-color
,border-right-color
,border-bottom-color
, andborder-left-color
writing-mode
,direction
,text-orientation