How to create a Border around an HTML Element using CSS ?
Syntax
/* Shorthand syntax */
.box {
border: 2px solid #333;
}
OR
/* Individual properties */
.box-individual {
border-width: 1px;
border-style: dashed;
border-color: red;
}
Example:
HTML
<!DOCTYPE html> < html > < head > < title >Border Around HTML Element</ title > < style > p.dotted { border-style: dotted; } p.dashed { border-style: dashed; } p.solid { border-style: solid; } p.double { border-style: double; } </ style > </ head > < body > < h2 >The border-style Property</ h2 > < p >w3wiki</ p > < p class = "dotted" >A dotted border.</ p > < p class = "dashed" >A dashed border.</ p > < p class = "solid" >A solid border.</ p > < p class = "double" >A double border.</ p > </ body > </ html > |
Output:
Important Points:
- Shorthand and Individual Properties: The
border
property can be written in shorthand or as separate properties (border-width
,border-style
,border-color
). - Color Values: The
border-color
property accepts various color values. - Style Options: The
border-style
property allows you to choose from different styles, such assolid
,dashed
,dotted
, etc. - Width: The
border-width
property sets the width of the border.
Contact Us