How to add a specific color to an element using CSS ?

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

Last Updated : 10 Oct, 2024

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.

Approach

HTML 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 Chrome
Internet Explorer
Firefox
Safari
Opera

How to add a specific color to an element using CSS ?

M

manaschhabra2

Improve

Article Tags :

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

How to add a specific color to an element using CSS ?

In this article, we will discuss elements and how to add a specific color to an element using CSS properties. Basically, the HTML element is the collection of start and end tags with the content inserted in between them. Elements can be nested. <tagname> Content </tagname> Note: Please r

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

How to Zoom an Element on Hover Using CSS ?

Zooming an element on hover using CSS involves creating an effect where an element, such as an image or button, increases in size when the user hovers over it. This interactive technique enhances user engagement by highlighting elements through smooth scaling animations.ApproachHTML Structure: Uses

How to Add a Border or Shadow to Elements using Bootstrap 5 Classes ?

To add a border in Bootstrap 5, we can use classes like 'border' for a full border or border-top, border-end, border-bottom, border-start for specific sides. For shadows, apply classes like 'shadow' for a default shadow, shadow-sm for a small shadow, or shadow-lg for a large shadow. Table of Content

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

How to Add an Iframe Border using CSS ?

This article will show you how to add a border to the iframe element using CSS. An inline frame is used to embed another document within the current HTML document. To add the iframe border, we will use the CSS border property. Syntax:<style> iframe { bord

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

How to Shift Inline Elements When Text Bold on Hover using CSS ?

When we will use a:hover pseudo-class to add a bold effect to the inline elements then we observe that whenever we hover over elements with the mouse, the elements to the right side of the mouse gets shifted to the right. This is not a good user experience thus needs to be removed. We can use the le

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