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
Usage of border property with CSS
The border property in CSS is used to create visible borders around HTML elements. It's a shorthand property that combines border width, style, and color in a single declaration.
Syntax
border: width style color;
Where:
- width - thickness in pixels, ems, or other units
- style - solid, dashed, dotted, double, etc.
- color - any valid CSS color value
Example: Basic Border Usage
Here's how to apply different border styles to images:
<html>
<head>
</head>
<body>
<!-- No border -->
<img style="border: 0px;" src="/css/images/logo.png" alt="Logo without border" />
<br /><br />
<!-- Dashed green border -->
<img style="border: 4px dashed green;" src="/css/images/logo.png" alt="Logo with dashed border" />
<br /><br />
<!-- Solid red border -->
<img style="border: 2px solid red;" src="/css/images/logo.png" alt="Logo with solid border" />
</body>
</html>
Border Styles
Common border style values include:
| Style | Description | Example |
|---|---|---|
| solid | Single solid line | border: 2px solid blue; |
| dashed | Dashed line | border: 3px dashed red; |
| dotted | Dotted line | border: 1px dotted black; |
| double | Double line | border: 4px double green; |
Individual Border Sides
You can also set borders for specific sides:
<div style="border-top: 2px solid blue; border-bottom: 3px dashed red; padding: 10px;">
Different borders on top and bottom
</div>
Conclusion
The CSS border property is essential for styling elements with visible boundaries. Use the shorthand syntax for consistent borders or individual properties for customized styling on specific sides.
Updated on: 2026-03-15T23:18:59+05:30
87 Views
Advertisements