Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create and style borders using CSS?
We can define borders for an element and style them using CSS. The CSS border property is used to define the border properties for an element. It is a shorthand for border-width, border-style and border-color. Furthermore, images can be specified as a border.
Syntax
selector {
border: width style color;
}
Possible Values
| Property | Description | Values |
|---|---|---|
border-width |
Defines the thickness of the border | thin, medium, thick, or length (px, em, rem) |
border-style |
Defines the style of the border | solid, dashed, dotted, double, groove, ridge, inset, outset, none |
border-color |
Defines the color of the border | color name, hex, rgb, rgba, hsl, hsla |
Example 1: Basic Border Styles
The following example demonstrates different border styles −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 60px;
margin: 10px;
padding: 10px;
display: inline-block;
text-align: center;
color: white;
font-weight: bold;
}
.solid { border: 3px solid #e74c3c; background-color: #3498db; }
.dashed { border: 3px dashed #27ae60; background-color: #9b59b6; }
.dotted { border: 3px dotted #f39c12; background-color: #34495e; }
.double { border: 5px double #e67e22; background-color: #2c3e50; }
</style>
</head>
<body>
<div class="box solid">Solid Border</div>
<div class="box dashed">Dashed Border</div>
<div class="box dotted">Dotted Border</div>
<div class="box double">Double Border</div>
</body>
</html>
Four colored boxes appear side by side, each demonstrating a different border style: solid red border, dashed green border, dotted orange border, and double brown border.
Example 2: Border Image
The following example uses an image as a border −
<!DOCTYPE html>
<html>
<head>
<style>
.border-image {
border: 20px solid transparent;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4) 1;
padding: 20px;
margin: 20px;
background-color: #f8f9fa;
text-align: center;
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<div class="border-image">
This div has a colorful gradient border image applied using the border-image property.
</div>
</body>
</html>
A light gray box with a colorful gradient border (red, teal, blue, green) surrounds centered text explaining the border-image property.
Example 3: Rounded Borders with Complex Styling
The following example combines borders with border-radius for complex shapes −
<!DOCTYPE html>
<html>
<head>
<style>
.complex-border {
width: 300px;
height: 200px;
margin: 20px auto;
border: 4px solid #8e44ad;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50px 20px 80px 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="complex-border">
Complex Border with Unique Corner Radii
</div>
</body>
</html>
A purple-bordered box with a blue-purple gradient background appears centered on the page. Each corner has a different border radius, creating an asymmetric rounded rectangle with white centered text.
Conclusion
CSS borders provide extensive styling options from simple solid lines to complex image borders. Use the shorthand border property for uniform styling or individual properties for precise control over each border aspect.
Updated on: 2026-03-15T13:48:42+05:30
133 Views
Advertisements