Search⌘ K
AI Features
Home
Courses
Modern CSS Layout: Decking Zombies with Style

Border Property

Explore CSS border properties that adapt to different writing directions. Learn to apply border-inline-start, border-inline-end, border-block-start, and border-block-end along with their width, style, and color variants to create flexible, responsive designs.

We'll cover the following...

Borderline direction agnostic zombies

  • border-inline-start: The border properties for the start of the inline direction (the writing-direction-agnostic version of border-left)
  • border-inline-end: The border properties for the end of the inline direction (the writing-direction-agnostic version of border-right)
  • border-block-start: The border properties for the start of the block direction (the writing-direction-agnostic version of border-top)
  • border-block-end: The border properties for the end of the block direction (the writing-direction-agnostic version of border-bottom)
.bordering-direction-agnostic-zombies {
    border-inline-start: 5px solid #960B0B;
    border-inline-end: 5px solid blue;
    border-block-start: 5px solid green;
    border-block-end: 5px solid purple;
}

The properties defined above can further be broken down into each separate property: width, style, and color.

  • border-inline-start-width: The border size for the start of the inline direction (the writing-direction-agnostic version of border-left-width)

  • border-inline-end-width: The border size for the end of the inline direction (the writing-direction-agnostic version of border-right-width)

  • border-block-start-width: The border size for the start of the block direction (the writing-direction-agnostic version of border-top-width)

  • border-block-end-width: The border size for the end of the block direction (the writing-direction-agnostic version of border-bottom-width)

  • border-inline-start-style: The border style for the start of the inline direction (the writing-direction-agnostic version of border-left-style)

  • border-inline-end-style: The border style for the end of the inline direction (the writing-direction-agnostic version of border-right-style)

  • border-block-start-style: The border style for the start of the block direction (the writing-direction-agnostic version of border-top-style)

  • border-block-end-style: The border style for the end of the block direction (the writing-direction-agnostic version of border-bottom-style)

  • border-inline-start-color: The border color for the start of the inline direction (the writing-direction-agnostic version of border-left-color)

  • Border-inline-end-color: The border color for the end of the inline direction (the writing-direction-agnostic version of border-right-color)

  • Border-block-start-color: The border color for the start of the block direction (the writing-direction-agnostic version of border-top-color)

  • Border-block-end-color: The border color for the end of the block direction (the writing-direction-agnostic version of border-bottom-color)

.bordering-direction-agnostic-zombies {

    /* Left Border */
    border-inline-start-width: 5px;
    border-inline-start-style: solid;
    border-inline-start-color: #960B0B;

    /* Right Border */
    border-inline-end-width: 5px;
    border-inline-end-style: solid;
    border-inline-end-color: blue;

    /* Top Border */
    border-block-start-width: 5px;
    border-block-start-style: solid;
    border-block-start-color: green;

    /* Bottom Border */
    border-block-end-width: 5px;
    border-block-end-style: solid;
    border-block-end-color: purple;
}