Horje

BORDER left right top bottom - Border - CSS
Learn
CSS - Border - Border left right top bottom
border-[left|right|top|bottom]

The border-[left|right|top|bottom] property is used to add a border to a specific side of an element.

For example if you wanted to add a border to the left side of an element, you could do:

#element {
    border-left: 1px solid black;
}

Syntax

  • **border**
  • border: border-width border-style border-color | initial | inherit;
  • border-top: border-width border-style border-color | initial | inherit;
  • border-bottom: border-width border-style border-color | initial | inherit;
  • border-left: border-width border-style border-color | initial | inherit;
  • border-right: border-width border-style border-color | initial | inherit;
  • **border-style**
  • border-style: 1-4 none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
  • **border-radius**
  • border-radius: 1-4 length | % / 1-4 length | % | initial | inherit;
  • border-top-left-radius: length | % [length | %] | initial | inherit;
  • border-top-right-radius: length | % [length | %] | initial | inherit;
  • border-bottom-left-radius: length | % [length | %] | initial | inherit;
  • border-bottom-right-radius: length | % [length | %] | initial | inherit;
  • **border-image**
  • border-image: border-image-source border-image-slice [ border-image-width [ border-image-outset ] ] border-image-repeat
  • border-image-source: none | image;
  • border-image-slice: 1-4 number | percentage [fill]
  • border-image-repeat: 1-2 stretch | repeat | round | space
  • **border-collapse**
  • border-collapse: separate | collapse | initial | inherit

    • Remarks

    Related properties (opens new window):

  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width 
    • Read Article
    https://develop.horje.com/learn/1434/reference

     

    Horje