Latest web development tutorials

CSS Border (Borders)

CSS border properties

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

Border Style

Border style property specifies what kind of border to be displayed.

Remarkborder-style property is used to define the style of the border

border-style value:

none: No default border

dotted: dotted: Defines a marquee

dashed: Defines a dashed box

solid: the definition of solid border

double: define two boundaries. The same values ​​of the two border width and border-width of

groove: groove defined 3D border. The effect depends on the color values ​​of the boundary

ridge: the definition 3D ridge border. The effect depends on the color values ​​of the boundary

inset: Defines a 3D embedded border. The effect depends on the color values ​​of the boundary

outset: Defines a 3D outset border. The effect depends on the color values ​​of the boundary

Try: set the border style

Border Width

You can specify the width of the border by the border-width attribute.

Specifies the width for the border in two ways: You can specify the length of the value, such as 2px or 0.1em; or use one of the three keywords, which are thin, medium (default) and thick.

Note: CSS does not define three keywords specific width, so a user agent may be the thin, medium and thick respectively set equal to 5px, 3px, and 2px, while another user agent, respectively, set to 3px, 2px and 1px.

Examples

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

try it"

Border Color

border-color property sets the color of the border. You can set the color:

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

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

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

Examples

p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: # 98bf21;
}

try it"

Border - separate settings for each side

In CSS, you can specify different sides different borders:

Examples

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:

Examples

border-style:dotted solid;

try it"

border-style property can have one to four values:

  • border-style: dotted solid double dashed ;
    • The borders are dotted
    • Right border is solid
    • A double bottom border
    • Left border is dashed

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

  • border-style: dotted solid;
    • On the bottom is dotted border
    • Right and left borders are solid

  • border-style: dotted;
    • Surrounded by a dotted border

The above example uses the border-style. However, it can also be border-width, border-color together.

Border - shorthand property

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

T You can also set the border in a property.

You can "border" attribute set:

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

Examples

border:5px solid red;

try it"

Examples

More examples

All border properties in one declaration being
This example demonstrates a shorthand property to set all four border properties in the same statement.

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

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

Set the color of the four borders
This example demonstrates how to set the color 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 Shorthand property used to set the property of the four sides in a statement.
border-style It is used to set the border style of all the elements, or separately set the border style for each side.
border-width All border shorthand property sets the width for the element, or individually set the width to each side of the border.
border-color Shorthand property, the element of all visible colors border portion, or set the color, respectively four sides.
border-bottom Shorthand property used to set all the attributes of the border to a statement.
border-bottom-color Set the color of the bottom border of the element.
border-bottom-style Setting the border style elements.
border-bottom-width Set the width of the bottom border of the element.
border-left Shorthand property used to set all the left border properties to a statement.
border-left-color Set the color of the left border element.
border-left-style The element of the left border style.
border-left-width The element of the left border width.
border-right Shorthand property for setting all of the properties to the right of the box to a statement.
border-right-color Set the color of the right border element.
border-right-style The element of the right border styles.
border-right-width Set the width of the right border element.
border-top Shorthand property for setting all of the properties on the border to a statement.
border-top-color Element is set on the color of the border.
border-top-style Element is set on the border style.
border-top-width Element is set on the width of the border.