border-inline-end
Quick Summary for border-inline-end
border-inline-end
CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
Code Usage for border-inline-end
border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; /* Global values */ border-inline-end: inherit; border-inline-end: initial; border-inline-end: revert; border-inline-end: unset;
More Details for border-inline-end
border-inline-end
The border-inline-end
CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
Constituent properties
This property is a shorthand for the following CSS properties:
border-inline-end-color
border-inline-end-style
border-inline-end-width
Syntax
border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; /* Global values */ border-inline-end: inherit; border-inline-end: initial; border-inline-end: revert; border-inline-end: unset;
The physical border to which border-inline-end
maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the border-top
, border-right
, border-bottom
, or border-left
property depending on the values defined for writing-mode
, direction
, and text-orientation
.
Related properties are border-block-start
, border-block-end
, and border-inline-start
, which define the other borders of the element.
Values
The border-inline-end
is specified with one or more of the following, in any order:
<'border-width'>
The width of the border. See border-width
.
<'border-style'>
The line style of the border. See border-style
.
<'color'>
The color of the border. See color
.
Formal definition
Initial value | as each of the properties of the shorthand:border-width : as each of the properties of the shorthand:border-top-width : medium border-right-width : medium border-bottom-width : medium border-left-width : medium border-style : as each of the properties of the shorthand:border-top-style : none border-right-style : none border-bottom-style : none border-left-style : none color : canvastext |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as each of the properties of the shorthand:border-width : as each of the properties of the shorthand:border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden border-left-width : the absolute length or 0 if border-left-style is none or hidden border-right-width : the absolute length or 0 if border-right-style is none or hidden border-top-width : the absolute length or 0 if border-top-style is none or hidden border-style : as each of the properties of the shorthand:border-bottom-style : as specifiedborder-left-style : as specifiedborder-right-style : as specifiedborder-top-style : as specifiedborder-inline-end-color : computed color |
Animation type | as each of the properties of the shorthand:border-inline-end-color : a colorborder-inline-end-style : discreteborder-inline-end-width : a length |
Formal syntax
<'border-top-width'> || <'border-top-style'> || <color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
where
<alpha-value> = <number> | <percentage><hue> = <number> | <angle>
Examples
HTML
<div> <p class="exampleText">Example text</p> </div>
CSS
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-rl; border-inline-end: 5px dashed blue; }
Specifications
Specification |
---|
CSS Logical Properties and Values Level 1 # border-shorthands |
See also
This property maps to one of the physical border properties:border-top
, border-right
, border-bottom
, or border-left
. writing-mode
, direction
, text-orientation
Last modified: Sep 29, 2021, by MDN contributors
Select your preferred language English (US)EspañolFrançais日本語 Change language