Day 31: logical border properties

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

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;
}

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2022-11-07T09:38:54+00:00) Day 31: logical border properties. Retrieved from https://www.scien.cx/2022/11/07/day-31-logical-border-properties/

MLA

" » Day 31: logical border properties." Manuel Matuzović | Sciencx - Monday November 7, 2022, https://www.scien.cx/2022/11/07/day-31-logical-border-properties/

HARVARD

Manuel Matuzović | Sciencx Monday November 7, 2022 » Day 31: logical border properties., viewed ,<https://www.scien.cx/2022/11/07/day-31-logical-border-properties/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 31: logical border properties. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/07/day-31-logical-border-properties/

CHICAGO

" » Day 31: logical border properties." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/11/07/day-31-logical-border-properties/

IEEE

" » Day 31: logical border properties." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/11/07/day-31-logical-border-properties/. [Accessed: ]

rf:citation

» Day 31: logical border properties | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/11/07/day-31-logical-border-properties/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.