Day 31: logical border properties

posted on 07.11.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

Just like for margin or padding, there are also logical property variations for border properties.

Originally there were 4 shorthand properties we could use for defining borders.

• border - 1, 2, or 3 values (size, style, color)
• border-width - 1, 2, 3, or 4 size values for the different sides
• border-style - 1, 2, 3, or 4 style values for the different sides
• border-color - 1, 2, 3, or 4 color values for the different sides

And we could do the same for each physical side (top, right, bottom, left).

• border-left - 1, 2, or 3 values
• border-left-width - A size value
• border-left-style - A style value
• border-left-color - A color value

Now there are a couple of more properties:

border-block

• border-block - 1, 2, or 3 values (size, style, color)
• border-block-width - 1 or 2 size values (a single value for both sides or one for each)
• border-block-style - 1 or 2 style values
• border-block-color - 1 or 2 color values

div {
  border-block: solid;
}

div {
  border-block: 20px solid aqua;
}

div {
  border-block-color: green;
  border-block-width: 10px 20px;
  border-block-style: dashed dotted;
}

We can do the same for each individual side (block-start and block-end).

• border-block-start - 1, 2, or 3 values
• border-block-start-width - A size value
• border-block-start-style - A style value
• border-block-start-color - A color value

div {
  border-block-start: 2em solid red;
}

div {
  border-block-end-color: blue;
  border-block-end-width: 1rem;
  border-block-end-style: dashed;
}

border-inline

• border-inline - 1, 2, or 3 values
• border-inline-width - 1 or 2 size values
• border-inline-style - 1 or 2 style values
• border-inline-color - 1 or 2 color values

div {
  border-inline: solid;
}

div {
  border-inline: 20px solid aqua;
}

div {
  border-inline-color: green;
  border-inline-width: 10px 20px;
  border-inline-style: dashed dotted;
}

We can do the same for each individual side (inline-start and inline-end).

• border-inline-start - 1, 2, or 3 values
• border-inline-start-width - A size value
• border-inline-start-style - A style value
• border-inline-start-color - A color value

div {
  border-inline-start: 2em solid red;
}

<div>
  border-inline-start
</div>

<div dir="rtl">
  border-inline-start
</div>

div {
  border-inline-end-color: blue;
  border-inline-end-width: 1rem;
  border-inline-end-style: dashed;
}

See on CodePen

Further reading

• CSS Logical Properties and Values (MDN)
• Day 2: logical properties
• Day 3: logical property shorthands
• Day 44: logical floating and clearing

Overview: 100 Days Of More Or Less Modern CSS