Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 14 Dec, 2020
Improve Article
Save Article

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



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!