How to add border to an element on mouse hover using CSS ? Last Updated : 10 Oct, 2024 Comments Improve Suggest changes Like Article Like Report Adding a border to an element on mouse hover using CSS involves changing the element's border style when the mouse pointer is over it. This effect enhances user interaction by visually highlighting the element, achieved using the :hover pseudo-class to modify border properties.ApproachHTML Structure: Select the HTML element you want to apply the hover border effect to.Initial Styling: Define the element’s default border properties using CSS for its normal state.Hover Selector: Use the :hover pseudo-class to target the element when the mouse pointer is over it.Modify Border: Change border attributes like width, style, or color within the :hover selector.Smooth Transition: Add the transition property to ensure border changes occur smoothly on hover.Example: Here we are following above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #container { /* Using the grid property */ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; /* Making equal spaced divs */ gap: 1rem; } .box { border: 4px solid black; background-color: red; height: 30vh; } </style> </head> <body> <div id="container"> <div class="box">Box1</div> <div class="box">Box2</div> <div class="box">Box3</div> <div class="box">Box4</div> </div> </body> </html> Output:Supported Browsers:Google ChromeInternet ExplorerFirefoxSafariOpera Comment More infoAdvertise with us Next Article How to add border to an element on mouse hover using CSS ? M manaschhabra2 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to add rounded corner to an element using CSS ? In this article, we will discuss rounded corners by using CSS properties. When we remove the sharp edge of any element and give it a round shape, it is called a rounded corner. Approach: To change the sharp edge with a rounded edge we use the border-radius property. Example 1: In this example, we na 1 min read How to add Borders and Shadows to Elements in CSS ? Apply box shadows to elements to create a 3D effect, whereas adding borders to containers or boxes can enhance the structural clarity of a layout. In this article, we will learn how to add borders and shadows to the elements in CSS. We will explore two different approaches to adding borders and shad 2 min read How to Add Border to an Image Using HTML and CSS? Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.Syntax.im 1 min read How to Add Border Around Text using CSS? The CSS border property is used to add a border around text by wrapping the text in an HTML element like <span> or <p>. Syntaxborder: "borderWidth borderStyle colorName;"Example 1: Adding a border around the text content using CSS.HTML<p> The following text has a border <span st 1 min read How to change background color when hover over li elements using CSS ? In this article, we will see how to change the background color of li (list item) on hover using CSS.The hover effect may be used to indicate interactivity or might just be there for aesthetic purposes, like highlighting different items in case of a list. Hover event can be styled using the :hover p 2 min read Like