CSS Basics: Design Like a Pro – Mastering Border Styles for Professional Web Development

CSS borders are essential elements in web design, as they define the outer limit of an HTML element. Borders are the lines that enclose an HTML element in a box. The border box directly surrounds the padding box and is typically used to mark the outer boundary of the content area.

CSS border is the shorthand property for the properties:

• border-width
• border-style
• border-color

Each of these 3 CSS properties is also a shorthand property. And they are:

The value shown in orange is the standard use of the CSS border property.

1. The CSS border property can only be used to define the borders for all four sides in one step.

2. If you want to specify the border properties for a single side individually, you need to use the properties according to the list shown above, e.g. border-top-color for the border on the top.

3. • The thickness of the border is defined by the border-width value, e.g. in the CSS length unit px or em. Alternatively, the keywords thin, medium, or thick can also be used. The default is medium.

   • The appearance of the border is set by the value of the border-style property.

     dashed	single line that consists of a series of dashes
     dotted	single line that consists of a series of dots
     double	double solid line
     groove	3D border that appears to be carved into the page
     inset	3D border that appears to be embedded, like a button
     outset	3D border that appears slightly raised out, like apressed button
     ridge	3D border that appears slightly raised above
     solid	Default border, single solid line
     none	no border
     hidden	hidden border

   • The color of the border is defined by the value of the border-color property. It can be specified with a color name, as a hex code or as an RGB value. By default, colors are defined with their hex code.

/* define border region */
div {
  /* outer spacing */
  margin: 1.563em;

  /* inner spacing */
  padding: 0.625em;

  /* width of the border region */
  width: 80%;

  /* height of the border region */
  height: 4em;

  /* region background */
  background: #cccccc;
}


/* define border classes */
.solid {
  /* single solid line */
  border-style: solid;
}

.ridge {
  /* 3D border with raised above effect */
  border-style: ridge;
}

.outset {
  /* 3D border with raised out effect */
  border-style: outset;
}

.inset {
  /* 3D border with embedded effect */
  border-style: inset;
}

.groove {
  /* 3D border with carved effect */
  border-style: groove;
}

.double {
  /* double solid line */
  border-style: double;
}

.dotted {
  /* single line of dots */
  border-style: dotted;
}

.dashed {
  /* single line of dashes */
  border-style: dashed;
}

.none {
  /* no border */
  border-style: none;
}

<div class="solid">border-style: solid</div>
<div class="ridge">border-style: ridge</div>
<div class="outset">border-style: outset</div>
<div class="inset">border-style: inset</div>
<div class="groove">border-style: groove</div>
<div class="double">border-style: double</div>
<div class="dotted">border-style: dotted</div>
<div class="dashed">border-style: dashed</div>
<div class="none">border-style: none</div>

This background       represents the screen and is not part of the sample code.