CSS borders are essential elements in websites, representing the edges of various components and elements. CSS Borders refer to the lines that surround elements, defining their edges. Borders can be styled, colored, and sized using CSS properties such as border style, border color, border width, and border radius. borders can be styled with the top border, the right border, the bottom border, and the left border.
In this Borders in CSS article, we will learn about CSS borders, covering styling options, practical use cases, and best practices.
Table of Content
Border Properties
CSS provides several properties to customize borders:
- border-style: Determines the type of border (e.g., solid, dashed, dotted).
- border-width: Sets the width of the border (in pixels, points, or other units).
- border-color: Specifies the border color.
- border-radius: Creates rounded corners for elements.
Ways to Style Border in CSS
The CSS border property enables the styling of an element's border by setting its width, style, and color, allowing for customizable visual boundaries in web design.
1. Border Style
- CSS border-top style Property
- border-right-style Property
- border-bottom-style Property
- border-left-style Property
2. Border Width
- border-top-width Property
- border-right-width Property
- border-bottom-width Property
- border-left-width Property
3. Border Color
- border-top-color Property
- border-right-color Property
- border-bottom-color Property
- border-left-color Property
4. Border individual sides
5. Border radius property
Common Border Styles
The border-style property specifies the type of border. None of the other border properties will work without setting the border style.
Following are the types of borders:
- Dotted: Creates a series of dots.
- Dashed: Forms a dashed line.
- Solid: Produces a continuous line.
- Double: Renders two parallel lines.
- Groove and Ridge: Create 3D grooved and ridged effects.
- Inset and Outset: Add 3D inset and outset borders.
- None: Removes the border.
- Hidden: Hides the border.
Examples of CSS border Style
In this example we are going to use CSS border-style property.
<!DOCTYPE html>
<html>
<head>
<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:
Explanation:
- Here we defines paragraph elements with different border styles: dotted, dashed, solid, and double.
- Each paragraph demonstrates a distinct border style applied through the border-style property.
- CSS classes are used to assign specific border styles to paragraphs, such as .dotted, .dashed, .solid, and .double.
- When rendered, each paragraph showcases its designated border style, enhancing visual presentation.
CSS Border Width
Border width sets the width of the border. The width of the border can be in px, pt, cm or thin, medium, and thick.
Example of Border Width
Here is the basic example of using CSS border width property.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 8px;
}
</style>
</head>
<body>
<p>
Geeksforgeeks
</p>
<p>
Border properties
</p>
</body>
</html>
Output:
Explanation:
- In this example we contains two paragraphs styled with a solid border using CSS.
- The border width for both paragraphs is set to 8 pixels, defined by the border-width property.
- Each paragraph displays a solid border surrounding its content, enhancing visual separation.
- The border width can be adjusted to modify the thickness of the border as desired.
CSS Border Color
This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified border inherits the color of the element itself.
Example of CSS Border Color
Here we are implementing above explained border color property.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-color: red
}
</style>
</head>
<body>
<p>
Geeksforgeeks
</p>
<p>
Border properties:color
</p>
</body>
</html>
Output:
Explanation:
- Here we includes two paragraphs styled with a solid border.
- The border color for both paragraphs is set to red using the border-color property.
- Each paragraph displays a solid red border around its content, enhancing visual distinction.
- Border color can be customized by specifying different color values.
CSS Border individual sides:
Using border property, we can provide width, style, and color to all the borders separately for that we have to give some values to all sides of the border.
CSS Border individual sides Syntax:
border-top-style : dotted;
border-bottom-width: thick;
border-right-color: green;
CSS Border individual sides Example:
In this example, we set border-top-style as dotted in h2.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-top-style: dotted;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
</body>
</html>
Output:
Explanation:
- In thw above example we contains a single <h2> heading styled with a dotted border on the top.
- The border style for the top of the heading is set using the border-top-style property.
- This results in the top border of the heading being displayed as a dotted line.
- Using CSS, borders can be styled in various ways to enhance the appearance of elements.
Border radius property
The CSS border-radius property rounds the corners of an element's border, creating smoother edges, with values specifying the curvature radius.
Border radius property Syntax:
border-radius: value;
Example of Border radius property
Here is the bsic example of using border-radius property.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
text-align: center;
background: green;
border-radius: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
.png)
Explanation:
- In the above example we contains a single <h1> heading styled with a solid border.
- The text inside the heading is centered horizontally using the text-align property.
- The heading has a green background color and rounded corners achieved with border-radius.
- This creates a visually appealing header element with a solid border and rounded corners.
Practical Use Cases
CSS borders find application in various scenarios:
- Styling Buttons: Borders enhance button appearance.
- Creating Dividers: Use borders to separate content sections.
- Customizing Images: Add borders to image thumbnails.
- Designing Navigation Menus: Borders define menu items.
CSS Borders Use Cases:
1. How to define the color of the border using CSS ?
to define the color of border we use the border-color property in CSS to define the color of the border.
2. How to specify the double border using CSS ?
Here we Use the border-style property set to double and adjust the border-width property to control the thickness of the double border.
3.How to Add Border Around Text using CSS ?
Here we use the border property with values for style, width, and color to add a border around text in CSS.
4. How to create a Border around an HTML Element using CSS ?
To create a border around an HTML element using CSS, use the border property to specify style, width, and color.
5.How to create a hidden border using CSS properties ?
To create a hidden border using CSS properties, set the border-style property to hidden or none to hide the border.
CSS Borders Supported Browsers:
- Google Chrome 1 and above
- Internet Explorer 4 and above
- Firefox 1 and above
- Opera 3.5 and above
- Safari 1 and above