CSS - Border Design

Assalamualaikum, hi guys, Come back to my Medium on this chance. In here, in this chance i’d like to share about CSS - Border Design. Before that, i recommenf you to follow me and give some claps for this Medium as your kindness. Thank you ^^.


There’re many type of border design. And i think in this Medium, i’ll just share for about 8 types of border design. There were :

  1. Dotted : for make dotted line.
  2. Solid ( default border design ) : make line for the border.
  3. Dashed : make stripes border.
  4. Double : make solid double design.
  5. Groove : make 3D effect design for border.
  6. Ridge : make stand out line design border.
  7. Inset : same like ridge, but it’s drop.
  8. Outside : make effect like that bordered’s stand out.
  9. Hidden : for hiding the borderline.
  10. Mix : for mix for every side of border.

Pattern of Border Design

For value ‘Mix’, we could mix the border design with one-hand pattern. Pattern for mix the border design : top - right - bottom - left.

border-style : solid groove dashed dotted;

And we use the property for this design is : ‘ border-style : (value); ’. Look at bellow for example.

Example Script for Element ‘Style’

And we’ll write for the element ‘Body’ looks like :

Example Scrip for element ‘Body’

And we’ll see the result like :

Result of Scrip Above

Yeah, i think enough for this chance Medium as Border Design script. See you on my next Medium.