Working with the CSS Border

Note

• The CSS border properties ↗ are used to style the borders of HTML elements.
• They control the appearance of the borders, including their width, color, and style.

Border Shorthand Property

The border shorthand property allows you to set the width, style, and color of an element’s border in a single declaration.

You need to provide three values:

1. border-width: Specifies the width of the border (such as 1px, medium, thick).
2. border-style: Defines the style of the border (like solid, dashed, dotted, or none).
3. border-color: Sets the color of the border (such as #000, red, or rgb(255, 0, 0)).

The syntax for the CSS border shorthand property is as follows:

border: 2px solid #000;

css

Important Notes:

Tip

• The border-style is required for the border to be visible. If you omit the style, the border won’t appear, even if you provide a width and color.
• All three values (border-width, border-style, and border-color) are optional in the shorthand. However, border-style is required; otherwise, the border will not appear.
• The border shorthand can also be used for individual sides (top, right, bottom, left), allowing for different borders on each side of an element.

CSS Border Properties

• border: This shorthand property ↗ sets the width, style, and color of all four borders of an element in one declaration.

  border: 2px solid #000;

  css

• border-width: Specifies the width of the border. You can set different values for each side (top, right, bottom, left) or a single value for all sides.

  border-width: 5px; /* all sides */
  border-width: 5px 10px 15px 20px; /* top, right, bottom, left */

  css

• border-style: Defines the style of the border, such as solid, dashed, dotted, double, groove, ridge, inset, or outset.

  border-style: solid; /* solid border */
  border-style: dashed; /* dashed border */

  css

• border-color: Sets the color of the border. You can specify different colors for each side or a single color for all.

  border-color: red; /* all sides */
  border-color: red green blue yellow; /* top, right, bottom, left */

  css

• border-top, border-right, border-bottom, border-left: These properties allow you to apply styles to individual borders (top, right, bottom, left).

  border-top: 2px solid black;
  border-right: 3px dashed green;

  css

• border-radius: Rounds the corners of an element’s border. You can specify one value for all corners or individual values for each corner.

  border-radius: 10px; /* all corners */
  border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */

  css

• border-image: This property allows you to use an image as the border of an element. It includes several sub-properties, such as border-image-source, border-image-slice, and border-image-repeat.

  border-image: url(border-image.png) 30 round;

  css

Examples:

• Basic Example

  border: 2px solid black;

  css

  • 2px is the width of the border.
  • solid is the border style.
  • black is the color of the border.

• Border with Only Width and Style

  border: 3px dashed;

  css

  • 3px is the width.
  • dashed is the style, and the default border color (usually black) will be used.

• Border with Only Style

  border: solid;

  css

  • solid is the style. If you omit width and color, the default width will be medium (typically 3px) and the default color will be black.

• Border with Width and Color Only

  border: 5px red;

  css

  • 5px is the width.
  • red is the color. The default style is solid.

Summary of CSS Border Properties

Property	Description	Example
border	Shorthand property for setting border-width, border-style, and border-color together.	border: 2px solid #000;
border-width	Specifies the width of the border. Can be set for all sides or individually.	border-width: 5px 10px 15px 20px;
border-style	Defines the style of the border (solid, dashed, dotted, etc.).	border-style: dashed;
border-color	Sets the color of the border. Can be set for all sides or individually.	border-color: red green blue yellow;
border-top	Specifies the style for the top border.	border-top: 2px solid black;
border-right	Specifies the style for the right border.	border-right: 3px dashed green;
border-bottom	Specifies the style for the bottom border.	border-bottom: 1px dotted blue;
border-left	Specifies the style for the left border.	border-left: 5px solid red;
border-radius	Rounds the corners of the border. Can be applied to all corners or individually.	border-radius: 10px;
border-image	Allows the use of an image as a border. Includes sub-properties like border-image-source.	border-image: url(border.png) 30 round;