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:
Similar Reads
How to Create Badges using HTML and CSS ?
This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that
2 min read
How to create a 3D ridge border using CSS?
In CSS, the border-style property is used to set the line style of the border of an element. The border-style property may have one, two, three, or four values. When the specified value is one, the same style is applied to all four sides. When the specified value is two, the first style is applied t
2 min read
How to create a 3D outset and inset border using CSS ?
In this article, we will create a 3D outset and inset border using CSS. The Inset border property makes the content appear embedded (inside the surface) and on the other hand, the outset property makes the content appear embossed (outside the surface). You can achieve this task by using the border-s
2 min read
How to create a hidden border using CSS properties ?
In this article, we will learn how to create a hidden border using CSS properties. In the following examples, both inline styling and style definition is used in the head section to define the hidden border. Approach: We will use two headings in which one will show the border color and the other wil
2 min read
How to create a 3D groove border using CSS?
In CSS border-style property is used to set the line style of the border of an element. The border-style property may have one, two, three, or four values. When the specified value is one, the same style is applied to all four sides. When the specified value is two, the first style is applied to the
2 min read
How to Add Border Around Text using CSS?
The CSS border property is used to add a border around text by wrapping the text in an HTML element like <span> or <p>. Syntax border: "borderWidth borderStyle colorName;"Example 1: Adding a border around the text content using CSS. [GFGTABS] HTML <p> The following text has a borde
1 min read
How to create a shinny button using HTML and CSS ?
Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c
3 min read
How to Add an Iframe Border using CSS ?
This article will show you how to add a border to the iframe element using CSS. An inline frame is used to embed another document within the current HTML document. To add the iframe border, we will use the CSS border property. Syntax: <!-- CSS border to the iframe --><style> iframe { bor
2 min read
How to create a Hero Image using HTML and CSS ?
A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The
2 min read
How to Add Stroke using CSS ?
Adding a stroke using CSS means applying an outline or border around text or elements to enhance visibility and style. This effect is typically achieved with properties like `text-shadow` for text or stroke in SVG elements, creating bold, defined edges. Several methods can be used to add strokes usi
2 min read