WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Borders


CSS Border Properties

The CSS border property allows you to customize the borders of HTML elements. In order to add a border to the element, you need to specify the size, style, and color of the border. The example below shows how to add a solid green border to the paragraph.


Border Style

The border-style property used for change style

The following values are allowed:

  • dotted - It is a dotted border
  • dashed - It is a dashed border
  • solid - It is a solid border
  • double - It is a double border
  • groove - It is a 3D grooved border. The effect depends on the border-color value
  • ridge - It is a 3D ridged border. The effect depends on the border-color value
  • inset - It is a 3D inset border. The effect depends on the border-color value
  • outset - It is a 3D outset border. The effect depends on the border-color value
  • none - It is no border
  • hidden - It is a hidden border

There are various styles supported for the border-style property dotted, dashed, double.

Example

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A dotted border.

A dashed border.

A hidden border.

mixed border.

Try it yourself »

Border Width

The border-width property specifies the width of the border. .

The width can be set as a describe size such as px, pt, cm, em etc:

The border-width property have four values such as the top border, right border, bottom border, and the left border.

Example

p.first {
    border-style: double;
    border-width: 5px;
}

p.second {
    border-style: solid;
    border-width: medium;
}

p.third {
    border-style: dashed;
    border-width: 2px 10px 4px 20px;
}
Try it yourself »

Border Color

The border-color The border color of the element can be defined.

The color can be set :

  • name - define a color name, like "red"
  • Hex - define a hex value, like "#ff0000"
  • RGB - define a RGB value, like "rgb(255,0,0)"
  • transparent

Example

p.first {
    border-style: solid;
    border-color: : #9bf442;
}

p.second {
    border-style: #f4a041;
    border-color: #f44194 #41eef4 #79f441;
}

p.third {
    border-style: solid;
    border-color: red green blue yellow;
}
Try it yourself »

Border - Individual Sides

You can look examples above that it is possible to define a different border for each side.

In CSS, there is also properties for define each of the borders top, right, bottom, and left:

Example

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
Try it yourself »

The example above gives the same result as this:

Example

p {
    border-style: dotted solid;
}
Try it yourself »

This is example of how to look work:

If the border-style property has four values:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed

If the border-style property has three values:

  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double

If the border-style property has two values:

  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid

If the border-style property has one value:

  • border-style: dotted;
    • all four borders are dotted

The border-style property is used in the example above. However, it also works with border-width and border-color.


Border - Shorthand Property

You can look from the examples above, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

Example

p {
    border: 5px solid #9bf442;
}
Try it yourself »