WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Borders


CSS border attributes

CSS border attributes allow you to specify the style and color of an element's border.

Borders on all sides


Red bottom border


Rounded border


Left border with width, color is blue

Border style

The border style attribute specifies what kind of border to display.

border-style attribute is used to define the border style


border-style value:

none: default borderless

dotted: define a dotted border

dashed: define a dashed border

solid: define a solid border

double: defines two borders. Both borders have the same width as border-width

groove: Define a 3D groove border. The effect depends on the color value of the border

ridge: Defines the 3D ridge border. The effect depends on the color value of the border

inset: defines a 3D embedded border. The effect depends on the color value of the border

outset: Define a 3D protruding border. The effect depends on the color value of the border

There are different styles upheld for the border-style property spotted, 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: spotted dashed strong double;}

Border Width

You can specify the width of the border through the border-width property.

There are two ways to specify the width of the border: you can specify a length value, such as 2px or 0.1em (units are px, pt, cm, em, etc.), or use one of the 3 keywords, which are thick, medium (Default) and thin.

Note: CSS does not define the specific width of the 3 keywords, so one user may set thick, medium, and thin to be equal to 5px, 3px, and 2px, respectively, and another user may set them separately. Are 3px, 2px, and 1px.

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 property is used to set the border color. Colors you can set:

  • name-name of the specified color, such as "red"
  • RGB-specify the RGB value, such as "rgb (255,0,0)"
  • Hex-specify a hexadecimal value, such as "# ff0000"

You can also set the color of the border to "transparent".

Note: Border-color alone does not work, you must first use border-style to set the border style.

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 »

Borders-set each side separately

In CSS, you can specify different borders on different sides:

Example

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

The model above gives indistinguishable outcome from this:

Example

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

The border-style attribute can have 1-4 values:

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

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

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

  • border-style: dotted;
    • The four-sided border is dotted

The example above uses border-style. However, it can also be used with border-width and border-color.

Border - Shorthand Property

The above example uses a lot of properties to set the border.

You can also set the border in an attribute.

You can set this in the "border" property:

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

Example

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