CSS Borders
CSS borders are used to define an element’s boundary, providing visual separation and structure to web content. Borders can be customized in terms of width, style, and color, allowing for a wide range of design possibilities. Common border styles include solid, dashed, dotted, and double.
This Borders in CSS article will teach us about CSS borders, covering styling options, practical use cases, and best practices.
Table of Content
- Border Properties
- Ways to Style Border in CSS
- Common Border Styles
- CSS Border Width
- CSS Border Color
- CSS Border individual sides:
- Border radius property
- Practical Use Cases
- CSS Borders Use Cases
Border Properties
CSS provides several properties to customize borders:
| Property | Description |
|---|---|
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
2. Border Width
3. Border Color
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:
| Border Style | Description |
|---|---|
| Dotted | Creates a series of dots. |
| Dashed | Forms a dashed line. |
| Solid | Produces a continuous line. |
| Double | Renders two parallel lines. |
| Groove | Creates 3D grooved effect. |
| Ridge | Creates 3D ridged effect. |
| Inset | Adds 3D inset border. |
| Outset | Adds 3D outset border. |
| None | Removes the border. |
| Hidden | Hides the border. |
Example : In this example Paragraphs feature varied border styles (dotted, dashed, solid, double) via CSS classes (.dotted, .dashed, .solid, .double). This enhances visual presentation, demonstrating distinct styles for each paragraph.
<!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>w3wiki</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:
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 : In this example Two paragraphs have an 8-pixel solid border defined by CSS. This border enhances visual separation, and its thickness can be adjusted using the `border-width` property for a desired effect.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 8px;
}
</style>
</head>
<body>
<p>
w3wiki
</p>
<p>
Border properties
</p>
</body>
</html>
Output:
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 : In this example Two paragraphs have a solid red border set with the `border-color` property, enhancing visual distinction. The border color can be customized by specifying different color values.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-color: red
}
</style>
</head>
<body>
<p>
w3wiki
</p>
<p>
Border properties:color
</p>
</body>
</html>
Output:
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.
Syntax:
border-top-style : dotted;
border-bottom-width: thick;
border-right-color: green;
Example: In this example, A single <h2> heading features a dotted top border set with the `border-top-style` property. CSS allows various border styles to enhance element appearance.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-top-style: dotted;
}
</style>
</head>
<body>
<h2>Welcome to w3wiki</h2>
</body>
</html>
Output:
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.
Syntax:
border-radius: value;
Example : In this example A single <h1> heading has a solid border, centered text (using `text-align`), a green background, and rounded corners (using `border-radius`), creating a visually appealing header element.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
text-align: center;
background: green;
border-radius: 20px;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
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:
to define the color of border we use the border-color property in CSS to define the color of the border.
Here we Use the border-style property set to double and adjust the border-width property to control the thickness of the double border.
Here we use the border property with values for style, width, and color to add a border around text in CSS.
To create a border around an HTML element using CSS, use the border property to specify style, width, and color.
To create a hidden border using CSS properties, set the border-style property to hidden or none to hide the border.
Contact Us