CSS Borders

Keywords

css, border, css border, border style, color, dataidea, data science, web development, website

Photo by DATAIDEA

Borders

In CSS, we decorae borders with lines, make it square or rounded.

Border Style

The border-style CSS property sets the line style forall four sides of an element’s border.

Valid Values:

  • none:displays no border
  • hidden: displays no border
  • dotted: displays a series of rounded dots
  • dashed: displays a series of short square-ended dashes or line segments
  • solid: displays a single straight solid line
  • double: displays two straight lines
  • groove: displays a border with a carved apperarance
  • ridge: displays a border with an extruded appearance
  • inset: displays a border that makes the element appear embedded
  • outset: displays a border that makes the element appear embossed

Example: Here’s an example of a dashed border

p {
    border-style: dashed;
}

Result:

This is some content in a dashed border

Example: Here’s an example of a solid border

p {
    border-style: solid;
}

Result:

This is some content in a solid border

Border Width

We can specify the widths of an element’s borders using the border-width CSS property

Valid values:

  • thin: displays a thin border
  • medium: displays a medium border
  • thick: displays a thick border
  • <length>

Below is an example of usinga <length> value.

div {
    border-width: 10px;
    border-style: solid;
    width: 250px;
    height: 250px;
    background: yellow;
}

Result:

Border Color

The border-color CSS property defines the color of a border.

Valid value:

  • <color>

Example:

div {
    border-style: groove;
    border-width: 5px;
    border-color: magenta;
    width: 250px;
    height: 250px;
    background: yellow;
}

Result:

CSS Borders - Individual Sides

In CSS, we can specify border styles, widths, and colors on each side (top, right, bottom, left)

We can achieve this by using the following CSS properties.

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

Changing border style on each side example:

div {
    border-top-style: solid;
    border-right-style: dotted;
    border-bottom-style: dashed;
    border-left-style: groove;
    border-width: 5px;
    border-color: red;
    width: 250px;
    height: 250px;
    background: lightgrey;
}

Result:

Changing border width on each side example:

div {
    border-top-width: 5px;
    border-right-width: 10px;
    border-bottom-width: 15px;
    border-left-width: 20px;
    border-color: red;
    border-style: solid;
    width: 250px;
    height: 250px;
    background: lightgrey;
}

Result:

Changing border color on each side example:

div {
    border-top-color: blue;
    border-right-color: red;
    border-bottom-color: green;
    border-left-color: black;
    border-style: solid;
    border-width: 5px;
    width: 250px;
    height: 250px;
    background: lightgrey;
}

Result:

CSS Border - Shorthand Property

The border CSS property sets an element’s border. It’s a shorthand for the following CSS properties.

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

As with all shorthand properties, any omitted sub-values will be set to their initial sub-value

However, in this shorthand property, the border-style’s value is required.

Order does not matter.

Example:

div {
    border: 5px solid green;
    width: 250px;
    height: 250px;
    background: lightgrey;
}

Result:

Note!

The border property increases elements’outer size except table and td elements.

For instance, an element with a width and height of 20px and a border of 5px will have an outer width and height of 30px (20px width + 5px border-left-width + 5px `border-right-width = 30px outer width)

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Back to top