user
How to create a border in CSS without changing element size
alphonsio

You can create a border around an element in CSS without changing its size by using the outline property. The outline property is similar to border but does not affect the layout of the element, so it won't change its size and position. Here's how you can do it:

.element {
  outline: 1px solid black; /* Change the color, width, and style as desired */
}

This will create a solid black border around the element without affecting its size.

Here is an online example:

In this example:

  • outline: 1px solid black; adds a 1px solid black outline around the element.

The outline does not affect the size or position of the element, making it a great option when you need a visual border effect without altering the element's dimensions or the layout around it.