Day 31: logical border properties

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;
}
border-block
div {
border-block: 20px solid aqua;
}
border-block
div {
border-block-color: green;
border-block-width: 10px 20px;
border-block-style: dashed dotted;
}
border-block

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;
}
border-block-start
div {
border-block-end-color: blue;
border-block-end-width: 1rem;
border-block-end-style: dashed;
}
border-block-end

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;
}
border-inline
div {
border-inline: 20px solid aqua;
}
border-inline
div {
border-inline-color: green;
border-inline-width: 10px 20px;
border-inline-style: dashed dotted;
}
border-inline

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>
border-inline-start
<div dir="rtl">
border-inline-start
</div>
border-inline-start
div {
border-inline-end-color: blue;
border-inline-end-width: 1rem;
border-inline-end-style: dashed;
}
border-inline-end


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;
}
border-block
div {
border-block: 20px solid aqua;
}
border-block
div {
border-block-color: green;
border-block-width: 10px 20px;
border-block-style: dashed dotted;
}
border-block

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;
}
border-block-start
div {
border-block-end-color: blue;
border-block-end-width: 1rem;
border-block-end-style: dashed;
}
border-block-end

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;
}
border-inline
div {
border-inline: 20px solid aqua;
}
border-inline
div {
border-inline-color: green;
border-inline-width: 10px 20px;
border-inline-style: dashed dotted;
}
border-inline

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>
border-inline-start
<div dir="rtl">
border-inline-start
</div>
border-inline-start
div {
border-inline-end-color: blue;
border-inline-end-width: 1rem;
border-inline-end-style: dashed;
}
border-inline-end


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.