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 add a colored border to a button with CSS?
The CSS border property is used to add a colored border to HTML elements, including buttons. You can customize the border's width, style, and color to create various visual effects.
Syntax
selector {
border: width style color;
}
Possible Values
| Property | Values | Description |
|---|---|---|
width |
px, em, rem, thin, medium, thick | Sets the border thickness |
style |
solid, dashed, dotted, double, groove | Defines the border style |
color |
color names, hex, rgb, hsl | Sets the border color |
Example: Dashed Blue Border
The following example creates a button with a 3px dashed blue border −
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #ffeb3b;
color: black;
font-size: 16px;
padding: 12px 24px;
border-radius: 8px;
border: 3px dashed blue;
cursor: pointer;
}
</style>
</head>
<body>
<button class="button">Click Me</button>
</body>
</html>
A yellow button with a 3px dashed blue border and rounded corners appears on the page.
Example: Solid Red Border
This example shows a button with a solid red border −
<!DOCTYPE html>
<html>
<head>
<style>
.red-border-btn {
background-color: white;
color: #d32f2f;
font-size: 14px;
padding: 10px 20px;
border: 2px solid #d32f2f;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="red-border-btn">Submit</button>
</body>
</html>
A white button with red text and a 2px solid red border appears on the page.
Conclusion
The border property provides an easy way to add colored borders to buttons. You can combine different widths, styles, and colors to create the desired visual effect for your button designs.
Updated on: 2026-03-15T12:55:38+05:30
1K+ Views
Advertisements