CSS Borders - CodeVerge

The CSS border-style property is used to specify the style of the border of an HTML element.

The possible values for this property are:

none: no border is visible.
solid: a solid border. This is the default value.
dotted: a dotted border.
dashed: a dashed border.
double: a double border. The width of the border is determined by the border-width property.
groove: a 3D grooved border. The effect depends on the border color value.
ridge: a 3D ridged border. The effect depends on the border color value.
inset: a 3D inset border. The effect depends on the border color value.
outset: a 3D outset border. The effect depends on the border color value.

To use these values, you can set the border-style property in CSS, like so:

selector {
  border-style: solid;
}

You can also set the border-style property for specific sides of an element using the following longhand properties: border-top-style, border-right-style, border-bottom-style, and border-left-style.

selector {
  border-top-style: dotted;
  border-right-style: dashed;
  border-bottom-style: solid;
  border-left-style: double;
}

You can use the shorthand property border to set the border-style, border-width, and border-color properties all at once.

selector {
  border: solid 2px black;
}

Examples

Here are some examples of the border-style values in action:

/* None */
.none {
  border-style: none;
}
/* Solid */
.solid {
  border-style: solid;
}
/* Dotted */
.dotted {
  border-style: dotted;
}
/* Dashed */
.dashed {
  border-style: dashed;
}
/* Double */
.double {
  border-style: double;
}
/* Groove */
.groove {
  border-style: groove;
}
/* Ridge */
.ridge {
  border-style: ridge;
}
/* Inset */
.inset {
  border-style: inset;
}
/* Outset */
.outset {
  border-style: outset;
}

It’s important to notice that the values groove, ridge, inset and outset will depend on the color of the border as well, for example:

.groove {
  border-style: groove;
  border-color: blue;
}

It will have different results than:

.groove {
  border-style: groove;
  border-color: red;
}

You can also play around with the border-width property to see how it affects the border.

.solid {
  border-style: solid;
  border-width: 3px;
}

Also, you can use the shorthand property border to set the border-style, border-width, and border-color properties all at once.

.solid {
  border: solid 2px black;
}

You can see the result by applying this CSS to some HTML elements and see the differences.

CSS border-width

The CSS border-width property is used to specify the width of the border of an HTML element.

You can set the border-width property in CSS using length values (e.g. px, em, rem), percentage values, or one of the following keywords:

thin
medium (default value)
thick

Here are some examples of how you can use the border-width property:

/* Using length values */
.length {
  border-width: 5px; /* sets the border width to 5 pixels */
}
/* Using percentage values */
.percentage {
  border-width: 10%; /* sets the border width to 10% of the element's width */
}
/* Using keywords */
.keywords {
  border-width: thin; /* sets the border width to the browser's default thin value */
}

You can also set the border-width property for specific sides of an element using the following longhand properties: border-top-width, border-right-width, border-bottom-width, and border-left-width.

/* Using length values for specific sides of the element */
.length-sides {
  border-top-width: 2px;
  border-right-width: 4px;
  border-bottom-width: 6px;
  border-left-width: 8px;
}

You can also use the shorthand property border to set the border-style, border-width, and border-color properties all at once.

/* Shorthand property */
.solid {
  border: solid 2px black;
}

Keep in mind that the border-width property requires that a border-style be set, otherwise the width setting will have no effect.

CSS border-color

The CSS border-color property is used to specify the color of the border of an HTML element.

You can set the border-color property in CSS using any valid CSS color value, such as:

a named color (e.g. red, blue, green)
a hexadecimal value (e.g. #ff0000, #0000ff, #00ff00)
an RGB or RGBA value (e.g. rgb(255, 0, 0), rgba(0, 0, 255, 0.5))

Here are some examples of how you can use the border-color property:

/* Using named color */
.named {
  border-color: red;
}
/* Using hexadecimal value */
.hex {
  border-color: #ff0000;
}
/* Using RGB value */
.rgb {
  border-color: rgb(0, 0, 255);
}
/* Using RGBA value */
.rgba {
  border-color: rgba(255, 0, 0, 0.5);
}

You can also set the border-color property for specific sides of an element using the following longhand properties: border-top-color, border-right-color, border-bottom-color, and border-left-color.

/* Using different color for each side of the element */
.color-sides {
  border-top-color: blue;
  border-right-color: green;
  border-bottom-color: yellow;
  border-left-color: purple;
}

You can also use the shorthand property border to set the border-style, border-width, and border-color properties all at once.

/* Shorthand property */
.solid {
  border: solid 2px black;
}

It’s important to notice that the values groove, ridge, inset and outset for the border-style property will depend on the color of the border as well.

Also, keep in mind that if you set a border color without setting a border style, the color will have no effect.

Examples

CSS border-width

CSS border-color

Related Posts: