{"id":350993,"date":"2021-09-02T07:41:56","date_gmt":"2021-09-02T14:41:56","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=350993"},"modified":"2021-09-17T08:43:33","modified_gmt":"2021-09-17T15:43:33","slug":"border-inline","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-inline\/","title":{"rendered":"border-inline"},"content":{"rendered":"\n<p><code>border-inline<\/code> is a <a href=https://css-tricks.com/"https:////css-tricks.com//css-logical-properties///">CSS logical<\/a> shorthand property that combines <code>border-inline-color<\/code>, <code>border-inline-style<\/code>, and <code>border-inline-width<\/code> into a single declaration, styling an element&#8217;s borders in the inline (left and right) direction.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"2\"><code markup=\"tt\">.element {\n  border-inline: 5px solid red;\n  writing-mode: horizontal-tb;\n}<\/code><\/pre>\n\n\n\n<p><code>border-inline<\/code> is the logical equivalent to physical properties including <code>border-left<\/code> and <code>border-right<\/code> (or <code>border-top<\/code> and <code>border-bottom<\/code>, depending on the <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//w//writing-mode///">writing-mode<\/a><\/code>). It is defined in the <a href=https://css-tricks.com/"https:////drafts.csswg.org//css-logical//#propdef-border-block\" rel=\"noopener\">CSS Logical Properties and Values Level 1 specification<\/a> which is in Editor\u2019s Draft at the time of this writing. The property is also the companion to <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//border-block///">border-block<\/a><\/code>, which styles borders that flow in the block (top and bottom) direction.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1112\" height=\"690\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//08//border-inline.jpg?resize=1112%2C690&amp;ssl=1\%22 alt=\"Two light gray boxes, side-by-side-. One has a solid orange border on the left and right. The one of the right has the same borders, but on the top and bottom. The left box is in a horizontal writing mode and the right box is in a vertical writing mode.\" class=\"wp-image-351003\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-inline.jpg?w=1112&amp;ssl=1 1112w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-inline.jpg?resize=300%2C186&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-inline.jpg?resize=1024%2C635&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-inline.jpg?resize=768%2C477&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-inline.jpg?resize=1000%2C621&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption><code>border-inline<\/code> styles the borders in the inline direction, left and right, of an element by default, but it adapts to borders in the block direction, top and bottom, when switching the <code>writing-mode<\/code>.<\/figcaption><\/figure>\n\n\n\n<p class=\"is-style-explanation\">The <code>writing-mode<\/code> defaults to horizontal top-to-bottom if it is not explicitly declared.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-writing-mode-sets-the-direction\">The writing mode sets the direction<\/h3>\n\n\n<p>The direction of the borders depends on the <code>writing-mode<\/code> property. When the writing mode is set to the default horizontal direction, <code>border-inline<\/code> is applied to the left and right borders of an element. Conversely, a vertical <code>writing-mode<\/code>, applies <code>border-inline<\/code> to the top and bottom borders.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNwxvoO\" src=https://css-tricks.com/"////codepen.io//anon//embed//oNwxvoO?height=350&amp;theme-id=1&amp;slug-hash=oNwxvoO&amp;default-tab=result\%22 height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNwxvoO\" title=\"CodePen Embed oNwxvoO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<p>The <code>border-inline<\/code> logical property is a shorthand for setting both the start and end <code>border-inline-width<\/code>, <code>border-inline-style<\/code> and <code>border-inline-color<\/code> in a single declaration. Again, the direction of \u201cstart\u201d and \u201cend\u201d depends on the elements writing mode.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">border-inline: &lt;border-inline-width> || &lt;border-inline-style> || &lt;border-inline-color><\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">92 <sup>1<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">66+<\/td><td class=\"has-text-align-center\" data-align=\"center\">87+<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">14.1<\/abbr>+<\/td><td class=\"has-text-align-center\" data-align=\"center\">73+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS<br>Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">14.7+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">90+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">64 <sup>1<\/sup><\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_border-inline/" rel=\"noopener\">caniuse<\/a><br><br><sup>1<\/sup> Can be enabled by setting&nbsp;<code>#enable-experimental-web-platform-features<\/code>&nbsp;to enabled.<br><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-constituent-properties\">Constituent properties<\/h3>\n\n\n<p>Let\u2019s look specifically at the <code>border-inline-width<\/code>, <code>border-inline-style<\/code> and <code>border-inline-color<\/code>\u2009\u2014\u2009the three properties that make up the <code>border-inline<\/code> shorthand.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-border-inline-width\"><code>border-inline-width<\/code><\/h4>\n\n\n<p><code><strong>border-inline-width<\/strong><\/code> is pretty much what you\u2019d expect to get from the <code>border-width<\/code> property: it defines the thickness of the logical inline borders of an element. The big difference being that <code>border-inline-width<\/code> adapts to the element\u2019s writing mode.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* &lt;'border-inline-width'> values *\/\nborder-inline-width: 15px;\nborder-inline-width: thin; \/* equivalent to 1px *\/\nborder-inline-width: medium; \/* equivalent to 3px *\/\nborder-inline-width: thick; \/* equivalent to 5px *\/\n\n\/* Global values *\/\nborder-inline-width: inherit;\nborder-inline-width: initial;\nborder-inline-width: revert;\nborder-inline-width: unset;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-05b38e3d\"><li>Initial: medium<\/li><li>Applies to: Same as <code>border-left-width<\/code><\/li><li>Inherited: no<\/li><li>Percentages: n\/a<\/li><li>Computed value: Same as corresponding <code>border-*-width<\/code> properties<\/li><li>Canonical order: per grammar<\/li><li>Animation type: discrete<\/li><\/ul>\n\n\n\n<p><code>border-inline-width<\/code> is also considered a shorthand property even though it is a constituent of <code>border-inline<\/code>. It includes the following properties to control the widths of each individual border in the start and end direction of an element:<\/p>\n\n\n\n<ul><li><code>border-inline-start-width<\/code>: The width of the left border in a horizontal writing mode, the top border in a vertical left-to-right writing mode, and the bottom border in a vertical right-to-left writing mode.<\/li><li><code>border-inline-end-width<\/code>: The width of the right border in a horizontal writing mode, the bottom border in a vertical left-to-right writing mode, and the top border in a vertical right-to-left writing mode.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">92 <sup>1<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">66+<\/td><td class=\"has-text-align-center\" data-align=\"center\">87+<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">14.1<\/abbr>+<\/td><td class=\"has-text-align-center\" data-align=\"center\">73+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS<br>Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">14.7+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">90+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">64 <sup>1<\/sup><\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_border-inline-width/" rel=\"noopener\">caniuse<\/a><br><br><sup>1<\/sup> Can be enabled by setting&nbsp;<code>#enable-experimental-web-platform-features<\/code>&nbsp;to enabled.<br><\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-border-inline-style\"><code>border-inline-style<\/code><\/h4>\n\n\n<p><code><strong>border-inline-style<\/strong><\/code> is the logical equivalent to <code>border-style<\/code> and is used exactly the same way to specify the type of line drawn around the element. In fact, it takes the exact same values as well.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdwPbKJ\" src=https://css-tricks.com/"////codepen.io//anon//embed//mdwPbKJ?height=650&amp;theme-id=1&amp;slug-hash=mdwPbKJ&amp;default-tab=result\%22 height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdwPbKJ\" title=\"CodePen Embed mdwPbKJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* &lt;'border-block-style'> values *\/\nborder-inline-style: hidden;\nborder-inline-style: solid\nborder-inline-style: dashed;\nborder-inline-style: dotted;\nborder-inline-style: double;\nborder-inline-style: groove;\nborder-inline-style: ridge;\nborder-inline-style: inset;\nborder-inline-style: outset;\n\n\/* Global values *\/\nborder-inline-style: inherit;\nborder-inline-style: initial;\nborder-inline-style: revert;\nborder-inline-style: unset;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-19f771a7\"><li>Initial: none<\/li><li>Applies to: Same as <code>border-left-style<\/code><\/li><li>Inherited: no<\/li><li>Percentages: n\/a<\/li><li>Computed value: Same as corresponding <code>border-*-style<\/code> properties<\/li><li>Canonical order: per grammar<\/li><li>Animation type: discrete<\/li><\/ul>\n\n\n\n<p><code>border-inline-style<\/code> is also considered a shorthand property. It includes the following properties to control the type of line drawn for individual borders in the start and end direction of an element:<\/p>\n\n\n\n<ul><li><code>border-inline-start-style<\/code>: The style of the left border in a horizontal writing mode, the top border in a vertical left-to-right writing mode, and the right border in a vertical right-to-left writing mode.<\/li><li><code>border-inline-end-style<\/code>: The style of the right border in a horizontal writing mode, the bottom border in a vertical left-to-right writing mode, and the top border in a vertical right-to-left writing mode.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">92 <sup>1<\/sup><\/td><td class=\"has-text-align-center\" data-align=\"center\">66+<\/td><td class=\"has-text-align-center\" data-align=\"center\">87+<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">14.1<\/abbr>+<\/td><td class=\"has-text-align-center\" data-align=\"center\">73+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS<br>Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">14.7+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">90+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">64 <sup>1<\/sup><\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_border-inline-style/" rel=\"noopener\">caniuse<\/a><br><br><sup>1<\/sup> Can be enabled by setting&nbsp;<code>#enable-experimental-web-platform-features<\/code>&nbsp;to enabled.<br><\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-border-inline-color\"><code>border-inline-color<\/code><\/h4>\n\n\n<p><code>border-inline-color<\/code> is used to specify the border color.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">border-inline-color: yellow;\nborder-inline-color: #F5F6F7;\nborder-inline-color: rgba(170, 50, 220, .6);\nborder-inline-color: hsla(50, 100%, 50%, .6);\n\n\/* Global values *\/\nborder-inline-color: inherit;\nborder-inline-color: initial;\nborder-inline-color: revert;\nborder-inline-color: unset;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-19f771a7\"><li>Initial: none<\/li><li>Applies to: Same as <code>border-left-color<\/code><\/li><li>Inherited: no<\/li><li>Percentages: n\/a<\/li><li>Computed value: Same as corresponding <code>border-*-color<\/code> properties<\/li><li>Canonical order: per grammar<\/li><li>Animation type: by computed value type<\/li><\/ul>\n\n\n\n<p><code>border-inline-color<\/code> is also considered a shorthand property. It includes the following properties to control the type of line drawn for individual borders in the start and end direction of an element:<\/p>\n\n\n\n<ul><li><code>border-inline-start-color<\/code>: The color of the left border in a horizontal writing mode, the top border in a vertical left-to-right writing mode, and the bottom border in a vertical right-to-left writing mode.<\/li><li><code>border-inline-end-color<\/code>: The color of the bottom border in a horizontal writing mode, the right border in a vertical left-to-right writing mode, and the left border in a vertical right-to-left writing mode.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">41+<\/td><td class=\"has-text-align-center\" data-align=\"center\">69+<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">12.1<\/abbr>+<\/td><td class=\"has-text-align-center\" data-align=\"center\">56+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS<br>Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">12.2+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">90+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\">64<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_border-inline-color/" rel=\"noopener\">caniuse<\/a><br><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-let-s-talk-about-declaring-just-one-side\">Let\u2019s talk about declaring just one side<\/h3>\n\n\n<p>But wait! You might be thinking of how you could just declare border for just one side of your container instead of having it left and right or top and bottom. If we were working with physical CSS properties, then we could simply reach for the individual <code>border-left<\/code>, <code>border-right<\/code>, <code>border-top<\/code>, and <code>border-bottom<\/code> properties.<\/p>\n\n\n\n<p>But for Logical Properties, we make use of <code>border-inline-start<\/code>, <code>border-inline-end<\/code>, both of set individual borders. Let\u2019s look specifically at both and see how they work.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-border-inline-start\"><code>border-inline-start<\/code><\/h4>\n\n\n<p><code><strong>border-inline-start<\/strong><\/code> styles the logical \u201cstarting\u201d border of an element. So, if we were working in, say, a default horizontal top-to-bottom writing mode, then the left border is the start and\u2009\u2014\u2009spoiler alert\u2009\u2014\u2009the right border is the end.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.box {\n  border-inline-start: 5px solid red;\n  writing-mode: horizontal-tb;\n  height: 200px;\n  width: 200px;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWgyWEg\" src=https://css-tricks.com/"////codepen.io//anon//embed//NWgyWEg?height=400&amp;theme-id=1&amp;slug-hash=NWgyWEg&amp;default-tab=result\%22 height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWgyWEg\" title=\"CodePen Embed NWgyWEg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But! If we were to change the writing direction to, say, vertical left-to-right, then the starting edge is rotated 90 degrees, which makes the top border the start.<\/p>\n\n\n\n<p>And, if we switch things up to vertical right-to-left, you\u2019ve can probably already guess it: the bottom border becomes the start.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Writing mode<\/th><th>Starting border<\/th><\/tr><\/thead><tbody><tr><td><code>horizontal-tb<\/code><\/td><td>Left border<\/td><\/tr><tr><td><code>vertical-lr<\/code><\/td><td>Top border<\/td><\/tr><tr><td><code>vertical-rl<\/code><\/td><td>Top border<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-border-inline-end\"><code>border-inline-end<\/code><\/h4>\n\n\n<p><code><strong>border-inline-end<\/strong><\/code> is everything we just looked at with <code>border-inline-start<\/code>, only in the opposite direction. So, if the \u201cstart\u201d in a horizontal top-to-bottom writing mode is the left border, the \u201cend\u201d is the right border.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.box {\n  border-inline-end: 5px solid red;\n  writing-mode: horizontal-tb;\n  height: 200px;\n  width: 200px;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWoQWMB\" src=https://css-tricks.com/"////codepen.io//anon//embed//MWoQWMB?height=400&amp;theme-id=1&amp;slug-hash=MWoQWMB&amp;default-tab=result\%22 height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWoQWMB\" title=\"CodePen Embed MWoQWMB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Writing mode<\/th><th>Ending border<\/th><\/tr><\/thead><tbody><tr><td><code>horizontal-tb<\/code><\/td><td>Right border<\/td><\/tr><tr><td><code>vertical-lr<\/code><\/td><td>Bottom border<\/td><\/tr><tr><td><code>vertical-rl<\/code><\/td><td>Bottom border<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-constituents-to-the-constituents\">Constituents to the constituents!<\/h3>\n\n\n<p>We just saw how <code>border-inline<\/code> is shorthand for <code>border-inline-start<\/code> and <code>border-inline-end<\/code>. We also know that <code>border-inline<\/code> takes three other properties as its values:<\/p>\n\n\n\n<ul><li><code>border-inline-width<\/code><\/li><li><code>border-inline-style<\/code><\/li><li><code>border-inline-color<\/code><\/li><\/ul>\n\n\n\n<p>Well, if you can believe it, each of those properties are also shorthand for individual properties of their own. We can actually use these to style the width, style, and color of each individual border of an element by inserting \u201cstart\u201d and \u201cend\u201d in the property name:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Start border properties<\/th><th>What it does<\/th><\/tr><\/thead><tbody><tr><td><code>border-inline-start-width<\/code><\/td><td>Sets the width of the&nbsp;\u201cstarting\u201d&nbsp;border<\/td><\/tr><tr><td><code>border-inline-start-style<\/code><\/td><td>Sets the line style of the&nbsp;\u201cstarting\u201d&nbsp;border<\/td><\/tr><tr><td><code>border-inline-start-color<\/code><\/td><td>Sets the color of the&nbsp;\u201cstarting\u201d&nbsp;border<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>End border properties<\/th><th>What it does<\/th><\/tr><\/thead><tbody><tr><td><code>border-inline-end-width<\/code><\/td><td>Sets the width of the&nbsp;\u201cending\u201d&nbsp;border<\/td><\/tr><tr><td><code>border-inline-end-style<\/code><\/td><td>Sets the line style of the&nbsp;\u201cending\u201dborder<\/td><\/tr><tr><td><code>border-inline-end-color<\/code><\/td><td>Sets the color of the&nbsp;\u201cending\u201dborder<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////drafts.csswg.org//css-logical//#propdef-border-block\" rel=\"noopener\">CSS Logical Properties and Values Level 1 specification<\/a><\/li><li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//border-inline/" rel=\"noopener\">MDN documentation<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-further-reading\">Further reading<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-350993\">\n\n  <time datetime=\"2020-01-23\" title=\"Originally published Sep 2, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 24, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//building-multi-directional-layouts///">\n      Building Multi-Directional Layouts    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//ahmadalfy///" aria-label=\"Author page of Ahmad El-Alfy\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//981b46396a22bf5a8190506fe892b3b5?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/981b46396a22bf5a8190506fe892b3b5?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//ahmadalfy///">\n      Ahmad El-Alfy    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-350993\">\n\n  <time datetime=\"2021-07-27\" title=\"Originally published Sep 2, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 29, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-logical-properties-and-values///">\n      CSS Logical Properties and Values    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//olliew///" aria-label=\"Author page of Ollie Williams\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b27d41bc94bc689f23c33aa62157dcb?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b27d41bc94bc689f23c33aa62157dcb?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//olliew///">\n      Ollie Williams    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-350993\">\n\n  <time datetime=\"2020-11-16\" title=\"Originally published Sep 2, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 16, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//logical-layout-enhancements-with-flow-relative-shorthands///">\n      Logical layout enhancements with flow-relative shorthands    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>border-inline is a CSS logical shorthand property that combines border-inline-color, border-inline-style, and border-inline-width into a single declaration, styling an element&#8217;s [&hellip;]<\/p>\n","protected":false},"author":283746,"featured_media":300990,"parent":13913,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350993"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/283746"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=350993"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350993\/revisions"}],"predecessor-version":[{"id":352200,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350993\/revisions\/352200"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=350993"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=350993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}