{"id":350928,"date":"2021-09-02T07:42:25","date_gmt":"2021-09-02T14:42:25","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=350928"},"modified":"2021-09-17T08:40:03","modified_gmt":"2021-09-17T15:40:03","slug":"border-block","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-block\/","title":{"rendered":"border-block"},"content":{"rendered":"\n<p><code>border-block<\/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-block-color<\/code>, <code>border-block-style<\/code>, and <code>border-block-width<\/code> into a single declaration.<\/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-block: 5px solid red;\n  writing-mode: horizontal-tb;\n}<\/code><\/pre>\n\n\n\n<p><code>border-block<\/code> is the logical equivalent to physical properties including <code>border-top<\/code> and <code>border-bottom<\/code> (or <code>border-right<\/code> and <code>border-left<\/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-inline///">border-inline<\/a><\/code>, which styles borders that flow in the inline 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-block-directions.jpg?resize=1112%2C690&amp;ssl=1\%22 alt=\"Two light gray boxes, side-by-side-. One has a solid orange border on the top and bottom. The one of the right has the same borders, but on the left and right. The left box is in a horizontal writing mode and the right box is in a vertical writing mode.\" class=\"wp-image-350930\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-block-directions.jpg?w=1112&amp;ssl=1 1112w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-block-directions.jpg?resize=300%2C186&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-block-directions.jpg?resize=1024%2C635&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-block-directions.jpg?resize=768%2C477&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/border-block-directions.jpg?resize=1000%2C621&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption><code>border-block<\/code> styles the borders in the block direction, top and bottom, of an element by default, but it adapts to borders in the inline direction, left and right, 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-block<\/code> is applied to the top and bottom borders of an element. Conversely, a vertical <code>writing-mode<\/code>, applies <code>border-block<\/code> to the right and left borders.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWgPMjd\" src=https://css-tricks.com/"////codepen.io//anon//embed//NWgPMjd?height=350&amp;theme-id=1&amp;slug-hash=NWgPMjd&amp;default-tab=result\%22 height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWgPMjd\" title=\"CodePen Embed NWgPMjd\" 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-block<\/code> logical property is a shorthand for setting both the start and end <code>border-block-width<\/code>, <code>border-block-style<\/code> and <code>border-block-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-block: &lt;border-block-width> || &lt;border-block-style> || &lt;border-block-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_aspect-ratio/" 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-block-width<\/code>, <code>border-block-style<\/code> and <code>border-block-color<\/code>\u2009\u2014\u2009the three properties that make up the <code>border-block<\/code> shorthand.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-border-block-width\"><code>border-block-width<\/code><\/h4>\n\n\n<p><code><strong>border-block-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 block borders of an element. The big difference being that <code>border-block-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-block-width'> values *\/\nborder-block-width: 15px;\nborder-block-width: thin; \/* equivalent to 1px *\/\nborder-block-width: medium; \/* equivalent to 3px *\/\nborder-block-width: thick; \/* equivalent to 5px *\/\n\n\/* Global values *\/\nborder-block-width: inherit;\nborder-block-width: initial;\nborder-block-width: revert;\nborder-block-width: unset;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-05b38e3d\"><li>Initial: medium<\/li><li>Applies to: Same as <code>border-top-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-block-width<\/code> is also considered a shorthand property even though it is a constituent of <code>border-block<\/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-block-start-width<\/code>: The width of the top border in a horizontal writing mode, the left 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-block-end-width<\/code>: The width 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\">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-block-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-block-style\"><code>border-block-style<\/code><\/h4>\n\n\n<p><code><strong>border-block-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_xxrbpMN\" src=https://css-tricks.com/"////codepen.io//anon//embed//xxrbpMN?height=650&amp;theme-id=1&amp;slug-hash=xxrbpMN&amp;default-tab=result\%22 height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxrbpMN\" title=\"CodePen Embed xxrbpMN\" 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-block-style: hidden;\nborder-block-style: solid\nborder-block-style: dashed;\nborder-block-style: dotted;\nborder-block-style: double;\nborder-block-style: groove;\nborder-block-style: ridge;\nborder-block-style: inset;\nborder-block-style: outset;\n\n\/* Global values *\/\nborder-block-style: inherit;\nborder-block-style: initial;\nborder-block-style: revert;\nborder-block-style: unset;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-19f771a7\"><li>Initial: none<\/li><li>Applies to: Same as <code>border-top-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-block-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-block-start-style<\/code>: The style of the top border in a horizontal writing mode, the left 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-block-end-style<\/code>: The style 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\">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-block-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-block-color\"><code>border-block-color<\/code><\/h4>\n\n\n<p><code>border-block-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-block-color: yellow;\nborder-block-color: #F5F6F7;\nborder-block-color: rgba(170, 50, 220, .6);\nborder-block-color: hsla(50, 100%, 50%, .6);\n\n\/* Global values *\/\nborder-block-color: inherit;\nborder-block-color: initial;\nborder-block-color: revert;\nborder-block-color: unset;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-19f771a7\"><li>Initial: none<\/li><li>Applies to: Same as <code>border-top-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-block-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-block-start-color<\/code>: The color of the top border in a horizontal writing mode, the left 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-block-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-block-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 top and bottom or left and right. If we were working with physical CSS properties, then we could simply reach for the individual <code>border-top<\/code>, <code>border-bottom<\/code>, <code>border-right<\/code>, and <code>border-left<\/code> properties.<\/p>\n\n\n\n<p>But for Logical Properties, we make use of <code>border-block-start<\/code>, <code>border-block-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-block-start\"><code>border-block-start<\/code><\/h4>\n\n\n<p><code><strong>border-block-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 top border is the start and\u2009\u2014\u2009spoiler alert\u2009\u2014\u2009the bottom 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-block-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_bGREaxN\" src=https://css-tricks.com/"////codepen.io//anon//embed//bGREaxN?height=400&amp;theme-id=1&amp;slug-hash=bGREaxN&amp;default-tab=result\%22 height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGREaxN\" title=\"CodePen Embed bGREaxN\" 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 left 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 right 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>Top border<\/td><\/tr><tr><td><code>vertical-lr<\/code><\/td><td>Left border<\/td><\/tr><tr><td><code>vertical-rl<\/code><\/td><td>Right border<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-border-block-end\"><code>border-block-end<\/code><\/h4>\n\n\n<p><code><strong>border-block-end<\/strong><\/code> is everything we just looked at with <code>border-block-start<\/code>, only in the opposite direction. So, if the \u201cstart\u201d in a horizontal top-to-bottom writing mode is the top border, the \u201cend\u201d is the bottom 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-block-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_xxrZpyY\" src=https://css-tricks.com/"////codepen.io//anon//embed//xxrZpyY?height=400&amp;theme-id=1&amp;slug-hash=xxrZpyY&amp;default-tab=result\%22 height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxrZpyY\" title=\"CodePen Embed xxrZpyY\" 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>Bottom border<\/td><\/tr><tr><td><code>vertical-lr<\/code><\/td><td>Right border<\/td><\/tr><tr><td><code>vertical-rl<\/code><\/td><td>Left 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-block<\/code> is shorthand for <code>border-block-start<\/code> and <code>border-block-end<\/code>. We also know that <code>border-block<\/code> takes three other properties as its values:<\/p>\n\n\n\n<ul><li><code>border-block-width<\/code><\/li><li><code>border-block-style<\/code><\/li><li><code>border-block-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-block-start-width<\/code><\/td><td>Sets the width of the&nbsp;\u201cstarting\u201d&nbsp;border<\/td><\/tr><tr><td><code>border-block-start-style<\/code><\/td><td>Sets the line style of the&nbsp;\u201cstarting\u201d&nbsp;border<\/td><\/tr><tr><td><code>border-block-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-block-end-width<\/code><\/td><td>Sets the width of the&nbsp;\u201cending\u201d&nbsp;border<\/td><\/tr><tr><td><code>border-block-end-style<\/code><\/td><td>Sets the line style of the&nbsp;\u201cending\u201dborder<\/td><\/tr><tr><td><code>border-block-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-block/" 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-350928\">\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-350928\">\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-350928\">\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-block is a CSS logical shorthand property that combines border-block-color, border-block-style, and border-block-width into a single declaration. border-block is the [&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\/350928"}],"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=350928"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350928\/revisions"}],"predecessor-version":[{"id":352196,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/350928\/revisions\/352196"}],"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=350928"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=350928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}