Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add border to an element on mouse hover using CSS ?

  • Last Updated : 14 Dec, 2020

We have given a web page containing elements and the task is to add border to an element on mouse move over (hover) using CSS. When we add a border to an element on hovering the mouse, it affects the position of the other nearest element. To remove this problem, we can use the CSS margin property.


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
        Add CSS Border on Mouse Hover 
        without Pushing Content
        ul {
            padding: 0;
            list-style: none;
        ul li {
            float: left;
            margin: 10px;
        ul ul li {
            display: block;
        ul li:hover {
            border: 5px solid green;
            overflow: hidden;
        ul ul li:hover img {
            margin: -5px;
        How to apply border to an element 
        on mouse hover without affecting 
        the layout in CSS?


Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!