Borders, Padding and Margins on required sides

Tweet

Borders, Padding and Margins can also be applied only to the required sides of an element. This is possible by combining the top, right, bottom and left properties with the box model properties.

Borders on required sides

p {
    padding:1em;
    width: 300px;
    
    border-top-width: 5px;
    border-top-style: dashed;
    border-top-color: teal;
    
    border-right-width: 1em;
    border-right-style: groove;
    border-right-color: #069;
    
    border-bottom-width: 5px;
    border-bottom-style: dotted;
    border-bottom-color: orange;
    
    border-left-width: 9px;
    border-left-style: solid;
    border-left-color: green;
}

You can see from the above picture that the borders on each side of the content is unique, and it's because of the mixing of the position properties(top, right, bottom and left) with the border properties(width, style and color). This now helps to style the borders on each sides individually.

As the above code contains a bit lot of work, you can use border shorthand property combining with positioning properties.

border-top: 5px dashed teal;
border-right: 1em groove #069;
border-bottom: 5px dotted orange;
border-left: 9px solid green;

Padding on required sides

p {
    border: 5px solid teal;
    width: 300px;
    
    padding-top: 1em;
    padding-bottom: 25px;
    padding-left: 1.5em;
}

Similar to mixing of position properties to borders, padding can also be applied to the required sides. If any side is left out, then padding do not apply to that side.

Margins on required sides

p {
    border: 5px solid teal;
    width: 300px;
    
    margin-top: 30px;
    margin-right: 1.5em;
    margin-bottom: 25px;
    margin-left: 18px;
}

After borders and padding, now we have seen how to make margin space on only the required sides.

Shorthand Styling of borders, padding and margins

Instead of using top, right, bottom, left values on borders, margins and padding you can use the shorthand styling which reduces a much lot of code.

Applying four values

p {
    width: 300px;
    border-style: solid dashed double dotted;
}

The four values(top, bottom, left and right) can be presented now in a single shorthand property like the code above. The first(solid), second(dashed), third(double) and fourth(dotted) value gives the top, right, bottom and left values respectively in a clockwise order.

Applying three values

p {
    width: 300px;
    border-style: solid dashed double dotted;
    border-color: yellow #069 orange;
}

Here the first value(yellow) define the top border, the second value(#069) defines the right and left borders and the third value(orange) define the bottom border.

Applying two values

p {
    width: 300px;
    border-style: solid dashed double dotted;
    border-color: yellow #069 orange;
    border-width: 0.9em 0.3em;
}

In this above code the border-width property has two values, where the first value(0.9em) defines the top and bottom borders and the second value(0.3em) defines the right and left borders.

Similarly, just like borders you can also use this shorthand property to padding and margins, like below

p {
    width: 300px;
    border-style: solid dashed double dotted;
    border-color: yellow #069 orange;
    border-width: 0.9em 0.3em;
    padding: 50px 3em 1em;
    margin: 30px 20px;
}