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
How to add border to an element on mouse hover using CSS?
CSS provides developers with tremendous power to customize and style their page in whatever way they want. One of the many features it provides to enable this level of customization is the ability to add interactivity to web elements. Hover effects can provide a more dynamic user experience. By applying a border to an element on mouse hover, the user is given a visual cue that they have interacted with that element.
Syntax
selector:hover {
border: width style color;
}
:hover Selector
The :hover selector in CSS is used to apply styles to an element when it is being hovered over by the mouse cursor. Here, selector refers to the element(s) that you want to apply the styles to when the mouse hovers over it.
Example: Adding Border on Hover
The following example demonstrates how to add a border to paragraph elements when the mouse hovers over them
<!DOCTYPE html>
<html>
<head>
<title>How to add border to an element on mouse hover using CSS?</title>
<style>
.container {
margin: 20px;
}
.hover-element {
padding: 15px;
margin: 10px 0;
background-color: #f0f0f0;
transition: all 0.3s ease;
}
.hover-element:hover {
border: 2px solid #007bff;
background-color: #e7f3ff;
}
</style>
</head>
<body>
<h4>How to add border to an element on mouse hover using CSS?</h4>
<div class="container">
<p class="hover-element">Hover over this element</p>
<p class="hover-element">Hover over this element</p>
<p class="hover-element">Hover over this element</p>
</div>
</body>
</html>
Three gray boxes appear on the page. When you hover over any box, it gets a blue border and the background color changes to light blue with a smooth transition effect.
Example: Different Border Styles
You can also apply different border styles and colors on hover
<!DOCTYPE html>
<html>
<head>
<style>
.border-examples {
display: flex;
gap: 20px;
margin: 20px;
}
.box {
width: 120px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa;
cursor: pointer;
transition: border 0.3s ease;
}
.solid-border:hover {
border: 3px solid red;
}
.dashed-border:hover {
border: 3px dashed green;
}
.dotted-border:hover {
border: 3px dotted purple;
}
</style>
</head>
<body>
<div class="border-examples">
<div class="box solid-border">Solid</div>
<div class="box dashed-border">Dashed</div>
<div class="box dotted-border">Dotted</div>
</div>
</body>
</html>
Three boxes appear side by side. Hovering over the first box shows a solid red border, the second shows a dashed green border, and the third shows a dotted purple border.
Conclusion
Adding borders to elements on mouse hover using CSS is a simple and effective way to enhance user interaction. The :hover pseudo-selector combined with the border property creates engaging visual feedback that improves the overall user experience.
2K+ Views
