CSS Tutorial

CSS Borders

div {
border-style: solid|groove|ridge|double;
border-color: black; /* any value of type:color is allowed. */
border-width: thin|medium|thick|npx;
}

Borders are lines that are used to frame the edges of an object.

In CSS, border can be styled in different ways using the border properties.

The border properties are:

  • border-style
  • border-width
  • border-color
div {
border-style: solid|groove|ridge|double;
border-color: black; /* any value of type:color is allowed. */
border-width: thin|medium|thick|npx;
}

Border Style

The border-style property specifies what kind of border to display.

The border-style property value can be one of:

  • solid
  • groove
  • ridge
  • double

Syntax

selector {
  border-style: solid|groove|ridge|double;
}

See the border-style Values

none - Defines no border
solid - Defines a solid border
double - Defines two borders. The width of the two borders are the same as the border-width value
dotted - Defines a dotted border
dashed - Defines a dashed border
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
  Do It Yourself
a

Border Width

The border-width property is used to set the width of the border. The width can be set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property value can be one of:

  • thin
  • medium
  • thick
  • npx

Syntax

selector {
  border-width: thin|medium|thick|npx;
}
where "n" = the number of width in pixels e.g (5px or 5em).
The border-width property will not work if it is used alone unless the border-style property has been defined.

Examples

div {
border-style: solid;
border-width: 3px;
} 
span { 
border-style: solid;
border-width: thick;
}

Border Color

The border-color property is used to set the color of the border.

The border-color property value can be set by.

  • a HEX value - e.g #FF00FF
  • an RGB value - e.g rgb(255,0,0)
  • a color name - like green!
  • a HSL - like hsl(240,100%,50%)
  • You can also set to transparent if you do not want any color.
The border-color property does not work when used alone unless the border-style property has been defined.

Example

p {
border-style: solid;
border-color: green;
} 

span {
border-style: solid; 
border-color: #ff00ff; 
}

Border - Individual sides

In CSS it is possible to specify different borders for different sides

Syntax

selector {
border: style width color;
}
Note that the above syntax value is separated in spaces, this is a way

Setting Styles for the Top Border

Example

div {
border-top-style: solid|groove|ridge|double;
border-top-color: green; /* any value of type:color is allowed */
border-top-width: thin|medium|thick|npx;
}
where "n" = the number of width in pixels e.g (5px).

Setting Styles for the Bottom Border

Example

div {
border-bottom-style: solid|groove|ridge|double;
border-bottom-color: green; /* any value of type:color is allowed */
border-bottom-width: thin|medium|thick|npx;
}
where "n" = the number of width in pixels e.g (5px).

Setting Styles for the Left Border

Example

div {
border-left-style: solid|groove|ridge|double;
border-left-color: green; /* any value of type:color is allowed */
border-left-width: thin|medium|thick|npx;
}
where "n" = the number of width in pixels e.g (5px).

Setting Styles for the Right Border

Example

div { border-right-style: solid|groove|ridge|double;
border-right-color: green; /* any value of type:color is allowed */
border-right-width: thin|medium|thick|npx;
}
where "n" = the number of width in pixels e.g (5px).

Example Derived

With the explanation above, we are able to style the border-top, border-bottom, border-left, border-right of the below.

Example

Border Shorthand Property

The border styles can be derived at once using the border shorthand property.

Examples

p {
  border: solid 3px yellow;
}

The borders of all the <p> elements on the webpage will be affected by the above CSS code.

  Do It Yourself

What You Should Know at the End of This Lesson

  • You should be able to tell briefly what CSS Borders is all about.
  • You should be able to style the individual border with different styles.
  • You should be able to style all the borders using the border shorthand property.
Previous Chapter Next Chapter