How to create and style border using CSS ?
Last Updated :
15 May, 2023
The border property is used to create a border around an element and defines how it should look. There are three properties of the border.
border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following values are allowed.
- dotted: A dotted border
- dashed: A dashed border
- solid: A solid border
- double: A double border
- groove: A 3D grooved border.
- ridge: A 3D ridged border.
- inset: A 3D inset border.
- outset: A 3D outset border.
- none: A no border style
- hidden: A hidden border.
Example: Here is a basic example of border-style property.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
</ head >
< style >
h1{
margin: auto;
padding: 10px;
color: green;
margin-top: 220px;
font-size: 48px;
width: fit-content;
/* Border */
border-style: dashed;
}
</ style >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
dashed border
Similarly, we can use any style from the above-given list based on our choice. We can individually change the style of the bottom, left, right, and top of the border.
Example: In the above HTML code, just change the stylesheet of the border as given below.
border-bottom-style : dashed;
border-left-style: solid;
border-right-style: double;
border-top-style: dotted;
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
</ head >
< style >
h1 {
margin: auto;
padding: 10px;
color: green;
margin-top: 220px;
font-size: 48px;
width: fit-content;
/* Border */
border-bottom-style: dashed;
border-left-style: solid;
border-right-style: double;
border-top-style: dotted;
}
</ style >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
border-width property: This property is used to define the width of all borders. The width can be of any size(in px, pt, cm, em, etc) or by using pre-defined values: thin, medium, or thick.
Example: Here is an example of the above-explained property.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
</ head >
< style >
h1{
margin: auto;
padding: 10px;
color: green;
margin-top: 220px;
font-size: 48px;
width: fit-content;
/* Border */
border-style: solid;
border-width: 5px;
}
</ style >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output :
border-color property: This property is used to change the color of all four borders. Change or add the following in the above HTML code in the style section.
Syntax:
border-color : green;
border-top-color: black;
border-bottom-color: yellow;
Example: Here we are using the above method.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
</ head >
< style >
h1 {
margin: auto;
padding: 10px;
color: green;
margin-top: 220px;
font-size: 48px;
width: fit-content;
/* Border */
border-style: solid;
border-color: green;
border-top-color: black;
border-bottom-color: yellow;
}
</ style >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
Border Shorthand: We can define all the above properties in a single property, border.
Syntax :
border: (border-width) (border-style) (border-color);
border: 5px dotted red;
Example: In this example, we are using the above method.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
</ head >
< style >
h1 {
margin: auto;
padding: 10px;
color: green;
margin-top: 220px;
font-size: 48px;
width: fit-content;
/* Border */
border: 5px dotted red;
}
</ style >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
Rounded borders: The border-radius property is used to add rounded borders. Change the above HTML code with the following syntax.
Syntax:
border: 5px solid red;
border-radius : 15px;
Example: Here we are using the above-explained method.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
</ head >
< style >
h1 {
margin: auto;
padding: 10px;
color: green;
margin-top: 220px;
font-size: 48px;
width: fit-content;
/* Border */
border: 5px solid red;
border-radius: 15px;
}
</ style >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...