/

CSS Border inside the element

CSS Border inside the element

In this blog post, we will explore how to create a CSS border inside an element using the box-shadow property. This technique can be useful when you want to highlight the hover effect on an element without altering its appearance as a box.

Let’s start with a simple example. Suppose we have a list of boxes, and we want to invert the colors on hover. We can achieve this by setting the background color to black and the text color to white for the div element:

1
2
3
4
div {
  background-color: #000;
  color: #fff;
}

Before hover

However, when we add the hover effect, the box doesn’t retain its box-like appearance. To address this, we can add a border to the element:

1
2
3
4
5
div:hover {
  background-color: #fff;
  color: #000;
  border: 4px solid #000;
}

After adding border

As you can see, the border is added outside the box, which doesn’t produce the desired result. To achieve the border inside the element, we can use the box-shadow property:

1
2
3
4
5
div:hover {
  background-color: #fff;
  color: #000;
  box-shadow: inset 0px 0px 0px 4px #000;
}

Here’s the improved result:

After using box-shadow

By using the box-shadow property with the inset keyword, we can create a border-like effect that appears inside the element. This technique allows us to maintain the box’s appearance, while still highlighting the hover effect.

Tags: CSS, box-shadow, border, hover effect