CSS Borders

❮ Previous Home Next ❯

The CSS border properties allow you to set the style, width and color of an element's border.

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

Example

h1 {
  border: 5px solid red;
}

h2 {
  border: 10px dotted blue;
}

p {
  border: 10px double;
}



CSS Border Style

The border-style property defines the visual style of up to four different sides of a border.

The following values are allowed:

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

h1 {
  border-style: dashed;
}

p {
  border-style: dotted;
}



CSS Border Width

The border-width property sets the width of an element’s complete border.

The following values are allowed:

Example

h1 {
  border-style: dashed;
  border-width: thick;
}

div {
  border-style: solid;
  border-style: dotted;
  border-width: thin;
}






CSS Border Color

The color can be set by:

See CSS colors chapter for more detail related colors.

Example

.exmp1 {
  border-style: solid;
  border-color: red;
}
.exmp2 {
  border-style: solid;
  border-color: red green;
}
.exmp3 {
  border-style: solid;
  border-color: red green blue;
}
.exmp4 {
  border-style: solid;
  border-color: red green blue yellow;
}

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

Note: If border-color is not set, it inherits the color of the element.




CSS Border Image

The border-image CSS property draws an image around a given element. It replaces the element's regular border.

The border-image property is a shorthand for the following CSS properties:

Example

#example1 { 
  border: 10px solid transparent;
  padding: 10px;
  border-image: url(border.png) 30 round;
}

#example2 { 
  border: 10px solid transparent;
  padding: 10px;
  border-image: url(border.png) 30 stretch;
}



CSS Border Radius

The border-radius CSS property rounds the corners of an element's outer border edge.

You can set a single radius to make circular corners, or two radius to make elliptical corners.

Example

#example1 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 25px;
}

#example2 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 50px 25px;
}

#example3 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 50px 25px 10px;
}

Note: Read more about border-radius.




All CSS Border Properties

Property Description
border Defines in a shorthand form the border-color, border-style and border-width for all four sides of an element’s border.
border-bottom A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color.
border-bottom-color Defines the color of an element’s bottom border.
border-bottom-left-radius Defines the radius of the border of the bottom-left corner.
border-bottom-right-radius Defines the radius of the border of the bottom-right corner.
border-bottom-style Sets the line style of an element's bottom border.
border-bottom-width Sets the width of the bottom border of an element.
border-collapse sets whether cells inside a <table> have shared or separate borders.
border-color A shorthand property for setting the individual border color properties.
border-image Sets the distance by which an element's border image is set out from its border box.
border-image-outset Sets the distance by which an element's border image is set out from its border box.
border-image-repeat Defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.
border-image-slice Divides the image specified by border-image-source into regions.
border-image-source Sets the source image used to create an element's border image.
border-image-width Specifies the width of an element's border image.
border-left A shorthand property for all the border-left-* properties.
border-left-color Defines the color of an element’s left border.
border-left-style Defines the style for the left border of an element.
border-left-width sets the width of an element’s left border.
border-radius A shorthand property for the four border-*-radius properties.
border-right A shorthand property for all the border-right-* properties.
border-right-color Defines the color of an element’s right border.
border-right-style Defines the style for the right border of an element.
border-right-width Sets the width of an element’s right border.
border-spacing Defines the space between cells in a table.
border-style Defines the visual style of up to four different sides of a border.
border-top A shorthand property for border-top-width, border-top-style and border-top-color.
border-top-color Defines the color of an element’s top border.
border-top-left-radius Defines the radius of the border of the top-left corner.
border-top-right-radius Defines the radius of the border of the top-right corner.
border-top-style Sets the line style of an element's top border.
border-top-width Sets the width of the top border of an element.
border-width Sets the width of an element’s complete border.



❮ Previous Home Next ❯