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.

Try it


border-inline-start-color: red;
border-inline-start-color: #ee4141;

/* Global values */
border-inline-start-color: inherit;
border-inline-start-color: initial;
border-inline-start-color: revert;
border-inline-start-color: revert-layer;
border-inline-start-color: unset;

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.



The color of the border.

Formal definition

Initial value currentcolor
Applies to all elements
Inherited no
Computed value computed color
Animation type a color

Formal syntax

border-inline-start-color = 



  <p class="exampleText">Example text</p>


div {
  background-color: yellow;
  width: 120px;
  height: 120px;

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-start-color: red;


Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
border-inline-start-color 69 79 413 No 56 12.1 69 69 414 48 12.2 10.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.