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 can I set the color, style, and width of lines in a single property with CSS?
The border property allows you to specify color, style, and width of lines in one property. This shorthand property combines three individual border properties into a single declaration, making CSS more concise and easier to manage.
Syntax
border: width style color;
Where:
- width - thickness of the border (e.g., 1px, 2px, thick)
- style - border style (solid, dashed, dotted, etc.)
- color - border color (name, hex, rgb, etc.)
Example
You can try to run the following code to specify the border property:
<html>
<head>
<title>Border Property Example</title>
</head>
<body>
<p style="border: 3px solid green;">
This example shows shorthand property for border.
</p>
<p style="border: 2px dashed red;">
This paragraph has a dashed red border.
</p>
<p style="border: 5px dotted blue;">
This paragraph has a dotted blue border.
</p>
</body>
</html>
Common Border Styles
| Style | Description | Example |
|---|---|---|
solid |
Continuous line | border: 2px solid black; |
dashed |
Dashed line | border: 2px dashed blue; |
dotted |
Dotted line | border: 2px dotted red; |
double |
Double line | border: 4px double green; |
Individual vs Shorthand
Instead of writing three separate properties:
border-width: 3px; border-style: solid; border-color: green;
You can use the shorthand:
border: 3px solid green;
Conclusion
The border shorthand property provides an efficient way to set width, style, and color in one declaration. This approach reduces code and improves maintainability in CSS styling.
Updated on: 2026-03-15T23:18:59+05:30
174 Views
Advertisements