In this chapter, we will speak about borders and how we can give styles to
them. We can give width, style and color to the border.
Tóm Tắt
Example of the border property:
<
html
>
<
head
>
<
title
>Title of the document</
title
>
</
head
>
<
body
>
<
p
style
="border:3px dotted #1c87c9"
> Example with a blue dotted border.</
p
>
<
p
style
="border:3px dashed #ffff00"
> Exaxmple with a yellow dashed border.</
p
>
<
p
style
="border:3px solid #8ebf42"
> Example with a green solid border.</
p
>
</
body
>
</
html
>Try it Yourself »
Result
Border Width
The border-width property sets the width of a border.
The width can be specified in pixels. It can also be specified by one of the three pre-defined values: medium, thin, or thick.
You cannot use the “border-width” property alone. It will not work. Use “border-style” for setting the borders first.
Example of the border-width property:
<
html
>
<
head
>
<
style
>
p
.border-width-1
{
border-style
: solid;
border-width
: 6px
;
}
p
.border-width-2
{
border-style
: dotted;
border-width
: 1px
;
}
p
.border-width-3
{
border-style
: dotted;
border-width
: medium;
}
p
.border-width-4
{
border-style
: double;
border-width
: 8px
;
}
p
.border-width-5
{
border-style
: double;
border-width
: thick;
}
p
.border-width-6
{
border-style
: solid;
border-width
: 3px
12px
6px
18px
;
}
</
style
>
</
head
>
<
body
>
<
h2
>The border-width Property</
h2
>
<
p
class
="border-width-1"
>Example with border-width.</
p
>
<
p
class
="border-width-2"
>Example with border-width.</
p
>
<
p
class
="border-width-3"
>Example with border-width.</
p
>
<
p
class
="border-width-4"
>Example with border-width.</
p
>
<
p
class
="border-width-5"
>Example with border-width.</
p
>
<
p
class
="border-width-6"
>Example with border-width.</
p
>
</
body
>
</
html
>Try it Yourself »
Border Color
The border-color property is used to set the color of a border. The color can be set by:
- name – specifies a color name, like “red”
- RGB – specifies a RGB value, like “rgb(255,0,0)”
- Hex – specifies a hex value, like “#ff0000”
You cannot use the “border-color” property alone. It will not work. Use “border-style” for setting the borders first.
Usually, we write these three properties together in one row.
Example of the border-color property:
<
html
>
<
head
>
<
style
>
p
.color-one
{
border-style
: solid;
border-color
: blue;
}
p
.color-two
{
border-style
: dotted;
border-color
: yellow;
}
p
.color-three
{
border-style
: solid;
border-color
: DarkBlue orange green red;
}
</
style
>
</
head
>
<
body
>
<
h2
>The border-color Property</
h2
>
<
p
class
="color-one"
>Example with blue solid border-color.</
p
>
<
p
class
="color-two"
>Example with yellow dotted border-color.</
p
>
<
p
class
="color-three"
>Example with multicolor border-color.</
p
>
</
body
>
</
html
>Try it Yourself »
You can try other examples with our CSS Maker tool.
Border Style
The CSS border-style property sets the style of all four sides of an element’s borders. Borders are placed on the top of an element’s background. It can have from one to four values. So, each side can have its value. The default value of border-style is none.
Border-style has the following values:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Some browsers do not support some styles. Usually, when a style is not supported, the browser draws the border as a solid one.
CSS Border for individual sides
CSS provides properties that specify each border (right, left, bottom and top).
The border-style property can have 4 values, for example, border-style: dotted solid double dashed; where the top border is dotted, the bottom border is double, the right border is solid, and the left border is dashed.
The border-style property can have 3 values, for example, border-style: dotted solid double; where the top border is dotted, the bottom border is double, and the right and left borders are solid.
The border-style property can have 2 values, for example, border-style: dotted solid; where the right and left borders are solid, and the top and bottom borders are dotted.
And, of course, this property can have only 1 value, for example, border-style: solid; where all the sides are solid.
Example of the border properties for individual sides:
<
html
>
<
head
>
<
style
>
p
{
border-top-style
: double;
border-right-style
: solid;
border-bottom-style
: dotted;
border-left-style
: groove;
}
</
style
>
</
head
>
<
body
>
<
p
>Example with border individual sides.</
p
>
</
body
>
</
html
>Try it Yourself »
CSS border as a shorthand property
The CSS border property is a shorthand property for the following individual border properties:
- The CSS border-width property, which sets the width of all four sides of an element’s border.
- The CSS border-style property, which sets the style of all four sides of an element’s borders.
- The CSS border-color property, which sets the color of all four sides of an element’s border.
Example of the border shorthand property:
<
html
>
<
head
>
<
style
>
p
.border-all
{
border
: 3px
solid red;
}
p
.border-left
{
border-left
: 4px
solid blue;
background-color
: #dcdcdc
;
}
p
.border-top
{
border-top
: 6px
solid green;
background-color
: #dcdcdc
;
}
</
style
>
</
head
>
<
body
>
<
h2
>The border Shorthand Property</
h2
>
<
p
class
="border-all"
>Example with a shorthand property for border-width, border-style, and border-color.</
p
>
<
p
class
="border-left"
>Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</
p
>
<
p
class
="border-top"
>Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</
p
>
</
body
>
</
html
>Try it Yourself »
Rounded borders
Using the CSS border-radius property, you can add rounded borders to an element.
Example of the border-radius property:
<
html
>
<
head
>
<
style
>
p
.normal
{
border
: 3px
solid blue;
}
p
.round-one
{
border
: 3px
solid blue;
border-radius
: 6px
;
}
p
.round-two
{
border
: 3px
solid blue;
border-radius
: 9px
;
}
p
.round-three
{
border
: 3px
solid blue;
border-radius
: 15px
;
}
</
style
>
</
head
>
<
body
>
<
h2
>The border-radius Property</
h2
>
<
p
class
="normal"
>Example with normal border</
p
>
<
p
class
="round-one"
>Example with round border</
p
>
<
p
class
="round-two"
>Example with rounder border</
p
>
<
p
class
="round-three"
>Example with roundest border</
p
>
</
body
>
</
html
>Try it Yourself »
The difference between borders and outlines
Outlines and borders are usually confusing because they are very similar. But there are differences between these two:
- Outlines are drawn outside of the content of an element, so they don’t take up space.
- Outlines usually are rectangular, although they don’t have to be.
