CSS Box Model

CSS border properties

CSS border properties allow you to specify the style and color of an element’s border.

Border style

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

Remark The border-style property is used to define the style of the border

border-style value:

none: no border by default

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 the length value, such as 2px or 0.1em (units are px, pt, cm, em, etc.), or use one of the three keywords, which are thick, medium (the default value) ) And thin.

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

Example

p .one { border-style: solid

    ;
     border-width: 5 px;
 } p .two { border-style: solid


    ;
     border-width: medium;
 }

Border color

The border-color property is used to set the color of the border. Colors that can be set:

  • name-the name of the specified color, such as “red”
  • RGB-Specify the RGB value, such as “rgb(255,0,0)”
  • Hex-Specify the 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 .one { border-style: solid

    ;
     border-color: red;
 } p .two { border-style: solid


    ;
     border-color: #98bf21;
 }

Border-set each side individually

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

Example

p { border-top-style: dotted

    ;
     border-right-style: solid;
     border-bottom-style: dotted;
     border-left-style: solid;
 }

The above example can also set a single attribute:

Example

border-style :dotted solid ; 

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

  • border-style:dotted solid double dashed;
    • The top border is dotted
    • The right border is solid
    • 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
    • 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 above example uses border-style. However, it can also be used with border-width and border-color.

Border-shorthand attribute

The above example uses many properties to set the border.

You can also set the border in an attribute.

You can set in the “border” property:

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

Example

border :5 px solid red ; 

More examples

All border properties in one declaration
This example demonstrates the use of shorthand properties to set all four border properties in the same declaration.

Set the style of
the bottom border This example demonstrates how to set the style of the bottom border.

Set the width of
the left border This example demonstrates how to set the width of the left border.

Set the colors of
the four borders This example demonstrates how to set the colors of the four borders. You can set one to four colors.

Set the color of
the right border This example demonstrates how to set the color of the right border.

CSS border properties

Attributes description
border Abbreviated attribute, used to set the attributes for the four sides in one statement.
border-style Used to set the style of all the borders of the element, or set the border styles for each side individually.
border-width Shorthand attribute, used to set the width for all borders of the element, or to set the width for each border individually.
border-color Shorthand attribute, set the color of the visible part of all the borders of the element, or set the colors for the 4 sides.
border-bottom Shorthand attribute, used to set all the attributes of the bottom border into one declaration.
border-bottom-color Set the color of the bottom border of the element.
border-bottom-style Sets the style of the bottom border of the element.
border-bottom-width Set the width of the bottom border of the element.
border-left Shorthand attribute, used to set all the attributes of the left border into one declaration.
border-left-color Set the color of the left border of the element.
border-left-style Sets the style of the left border of the element.
border-left-width Set the width of the left border of the element.
border-right Shorthand attribute, used to set all the attributes of the right border into one declaration.
border-right-color Set the color of the right border of the element.
border-right-style Sets the style of the right border of the element.
border-right-width Set the width of the right border of the element.
border-top Abbreviated attribute, used to set all the attributes of the upper border into one declaration.
border-top-color Set the color of the top border of the element.
border-top-style Sets the style of the top border of the element.
border-top-width Set the width of the top border of the element.