How to css line from top left to bottom right năm 2024

I saw a little conversation about this the other day and figured it would be fun to look at all the different ways to do it. None of them are particularly tricky, but perhaps you’ll favor one over another for clarity of syntax, efficiency, or otherwise.

Let’s assume we want a border on the bottom, left, and right (but not top) of an element.

Explicitly declare each side

.three-sides {  
  border-bottom: 2px solid black;  
  border-right:  2px solid black;  
  border-left:   2px solid black;  
}

While that’s pretty clear, it’s still making use of shorthand. Completely expanded it would be like this:

.three-sides {  
  border-bottom-color: black;  
  border-bottom-style: solid;  
  border-bottom-width: 2px;  
  border-left-color: black;  
  border-left-style: solid;  
  border-left-width: 2px;  
  border-right-color: black;  
  border-right-style: solid;  
  border-right-width: 2px;  
}

Knock off one of the sides

You can save a little code by declaring the border on all four sides with shorthand and then removing the one you don’t want:

.three-sides {  
  border: 2px solid black;  
  border-top: 0;  
}

Shorthand just the width

.three-sides {  
  border-color: black;  
  border-style: solid;  
  /* top, right, bottom, left - just like margin and padding */  
  border-width: 0 2px 2px 2px;  
}

As a fun little aside here, you don’t need to declare the border color to get a border to show up, because the color will inherit the currentColor! So this would work fine:

.three-sides {  
  /* no color declared */  
  border-style: solid;  
  border-width: 0 2px 2px 2px;  
}

And you’d have red borders if you did:

.three-sides {  
  border-color: red;  
  border-style: solid;  
  border-width: 0 2px 2px 2px;  
}

Strange, but true.

If you want to add the color explicity, you can kinda mix-and-match shorthand, so this will work fine:

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

Example

Set different padding for all four sides of a