Border Property

Get introduced to the border property of inline and block layouts.

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

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy