Wapka Official Forum

CSS Border Sides


CSS Border - Individual Sides
From the examples on the previous pages, you have seen that it is possible to specify a
different border for each side.
In CSS, there are also properties for specifying each of the borders (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 »

The example above gives the same result as this:

Example

p { 
border-style: dotted solid;}
Try it Yourself »

So, here is how it works:
If the border-style property has four values:

border-style: dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed



If the border-style property has three values:

border-style: dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double


If the border-style property has two values:

border-style: dotted solid;
top and bottom borders are dotted
right and left borders are solid


If the border-style property has one value:

border-style: dotted;all four borders are dotted



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; }/* One value */p {  border-style: dotted; }
Try it Yourself »


The border-style property is used in the example above. However, it also works with
border-width
and border-color.













★
+1

Reference: https://www.w3schools.com/css/css_border_sides.asp