CSS Border


CSS Border Properties

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

image.png

Red bottom border

image.png

image.png

image.png


Border Style

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

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

border-style value:

none: default borderless


dotted: define a dotted border


dashed: define a dashed border


solid: define a solid border


double: Define two borders. The width of the two borders is the same as the value of border-width


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


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


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


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

Try it: set the border style


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:5px;
}
p.two
{
    border-style:solid;    
    border-width:medium;
}

 Try It! 


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;
}

 Try It! 


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;
}

 Try It! 

The above example can also set a single attribute:

Example

border-style:dotted solid;

 Try It! 

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 borders on all sides are 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 a lot of 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:5px solid red;

 Try It! 


Examples

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 border 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 border the right border

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


CSS Border Properties

PropertyDescription
borderAbbreviated attribute, used to set the attributes for the four sides in one statement.
border-styleTo set the style of all the borders of the element, or set the border styles for each side individually.
border-widthShorthand attribute, used to set the width for all borders of the element, or to set the width for each border individually.
border-colorShorthand attribute, set the color of the visible part of all the borders of the element, or set the colors for the 4 sides.
border-bottomShorthand attribute, used to set all the attributes of the bottom border into one declaration.
border-bottom-colorSet the color of the bottom border of the element.
border-bottom-styleSets the style of the bottom border of the element.
border-bottom-widthSet the width of the bottom border of the element.
border-leftShorthand attribute, used to set all the attributes of the left border into one declaration.
border-left-colorSet the color of the left border of the element.
border-left-styleSets the style of the left border of the element.
border-left-widthSet the width of the left border of the element.
border-rightShorthand attribute, used to set all the attributes of the right border into one declaration.
border-right-colorSet the color of the right border of the element.
border-right-styleSets the style of the right border of the element.
border-right-widthSet the width of the right border of the element.
border-topShorthand attribute, used to set all the attributes of the upper border into one declaration.
border-top-colorSet the color of the top border of the element.
border-top-styleSets the style of the top border of the element.
border-top-widthSet the width of the top border of the element.