How to create a Border around an HTML Element using CSS ?
Last Updated :
01 Feb, 2024
Creating a border around an HTML element in CSS involves using the border
property. This property allows you to define the style, color, and width of the border surrounding the selected element. The border
property can be used in a shorthand form or separately for individual properties.
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 >Geeksforgeeks</ 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 as solid
, dashed
, dotted
, etc.
- Width: The
border-width
property sets the width of the border.
Share your thoughts in the comments
Please Login to comment...