The border
property is used to add a border around the element and these borders can be stylized from different
styles, colors, size, etc.
Given below are the different properties which helps in creating an attractive border:
It specifies the type of border which you want to display on the web page. Look at the table below to see different types of border styles.
Value | Description |
---|---|
none | It doesn't show any border. |
dotted | It shows a dotted border. |
dashed | It shows a dashed border. |
solid | It shows a solid border. |
double | It shows two borders of equal width. |
groove | It displays a 3d grooved border. |
ridge | It displays a 3d ridged border. . |
inset | It displays a 3d inset border. |
outset | It displays a 3d outset border. |
hidden | It defines a hidden border. This border exists but doesn't display. |
The border-style
property can be given separately for each side of the element:border-top
, border-right
,
border-bottom
and border-left
. It can also be given by shorthand property, like border-style: double solid dashed dotted;
for top, right, bottom, left borders respectively.
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
No border.
A hidden border.
The color can be specified by three ways:
"blue"
."#fff256"
.
"rgb(170,255,100)"
.
This is a solid red border
This is a solid green border
The border-width
is used to set the width of the border. It can be set in pre-defined values like
thin
, medium
, thick
or in pixels.
It can also be given by shorthand property, like border-width: 1px 5px 4px 5px;
for top, right, bottom, left
borders respectively.
Write here.
Write here.
Write here.
List of color names supported by all browser »
List of character codes to display special character »
List of all language supported by all browser »
List of Country code supported by all browser »