CSS Borders on Each Side

CSS Border - Individual Borders

From the examples in the previous chapter, you have seen that different borders can be specified for each side.

In CSS, there are some properties that can be used to specify each border (top, right, bottom, and left):

Example

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Result:

Different border styles

Try It Yourself

Different border styles

The result of the above example is the same as this:

Example

p {
  border-style: dotted solid;
}

Try It Yourself

Its working principle is as follows:

If border-style The attribute sets four values:

border-style: dotted solid double dashed;

  • The top border is a dashed line
  • The right border is a solid line
  • The bottom border is a double line
  • The left border is a dashed line

If border-style The attribute sets three values:

border-style: dotted solid double;

  • The top border is a dashed line
  • the right and left borders are solid
  • The bottom border is a double line

If border-style Property sets two values:

border-style: dotted solid;

  • the top and bottom borders are dashed
  • the right and left borders are solid

If border-style Property sets a value:

border-style: dotted;

  • All four sides are dashed

Example

/* Four values */
p {
  border-style: dotted solid double dashed; 
}
/* Three values */
p {
  border-style: dotted solid double; 
}
/* Two values */
p {
  border-style: dotted solid; 
}
/* A value */
p {
  border-style: dotted; 
}

Try It Yourself

was used in the above example border-style Property. But border-width and border-color Also applies.