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>
<!-- Adding some CSS -->
<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>
<!-- Adding some CSS -->
<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>
<!-- Adding some CSS -->
<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>
<!-- Adding some CSS -->
<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>
<!-- Adding some CSS -->
<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>
<!-- Adding some CSS -->
<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 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 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 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>. Syntaxborder: "borderWidth borderStyle colorName;"Example 1: Adding a border around the text content using CSS.HTML<p> The following text has a border <span st
1 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 { bord
1 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 usin
2 min read
How to Add Border to an Image Using HTML and CSS? Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.Syntax.im
1 min read
How to add border in the clip-path: polygon() using CSS ? Adding a border around shapes can substantially improve the visual attractiveness of your website when it comes to web design. Using the clip-path: polygon() Property is one great and inventive approach to accomplish this. This not only allows you to make unusual shapes but also allows you to add a
3 min read
How to define the color of the border using CSS ? We can give the color of the border using border or border-color properties. We need to give border-style property. Approach 1: We will give the color of the border using the border property of CSS.We will give our CSS inside the tags which are also known as an inline style.We need to give the borde
2 min read
How to specify the double border using CSS ? The task is to specify the double border using CSS. In this article, we are going to use the border-style property to style the border. we have two common methods border-style property style and outline property in CSS. Property used: border-style property: This property is used to set the style of
2 min read
How to Create Table in HTML with Border without CSS ? Creating tables in HTML remains an Important skill for over 80% of beginner web developers, especially when it comes to displaying structured data clearly. Tables help organize information into rows and columns, enhancing readability and layout. In this article, we’ll explore how to create a basic H
2 min read