CSS Basics: The Ultimate Guide to CSS Border Styles ⋄ Enhance Your Web Design Skills Now

Deutsch

CSS Property border – The Edges of a Rectangle

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:

1. border-width for:

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

2. border-style for:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

3. border-color for:

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

CSS Property border

Description Possible Values Default Value Category
border border width in px oder em
border style
border color
initial
inherit
borders
framing content

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

Beachte:
  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.

    • 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.

Example CSS
/* 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;
}
Example HTML
<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>
Output of the HTML code
border-style: solid
border-style: ridge
border-style: outset
border-style: inset
border-style: groove
border-style: double
border-style: dotted
border-style: dashed
border-style: none

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