Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 14 Dec, 2020
Geek Week

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.



<!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



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

My Personal Notes arrow_drop_up
Recommended Articles
Page :