CSS border width change on hover does not work as expected

Question

I would like my div to show a different border on hover. I tryied with absolute positioning of the ::before pseudo-element. But that does not work as expected. Can anyone help me to fix this? Or show me the correct way to achieve this?

The negative margin makes shrink with bottom and top other containers. So I tried with a new way.

div{
  width: 300px;
  height: 300px;
  border:1px solid red;
  overflow: hidden;
  position: relative;
}

div:hover::before{
  content: "";
  position: absolute;
  border: 4px solid blue;
  width: 100%;
  height: 100%;
}

    <div>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                  Neque delectus illo eligendi ipsa fugit quod praesentium
                  ducimus provident? Et labore ipsa eos praesentium error fugiat
                  culpa impedit voluptatem iusto aliquam? Optio temporibus
                  impedit eaque ex dolores harum id quasi sed, voluptas odit
                  libero eos similique maxime at doloribus, ipsam inventore
                  alias odio veritatis, quod animi nisi doloremque! Repellat,
                  deleniti inventore. Officiis saepe facilis, cumque minima quo
                  velit facere sequi, libero iste dicta maiores debitis dolor
                  quas, eum excepturi aut. Cumque, eum exercitationem. Quod ex
                  itaque incidunt culpa, obcaecati est accusantium! Consectetur,
                  in asperiores alias dolore fuga debitis ad illo reiciendis
                  voluptas perferendis expedita iure blanditiis doloremque
                  veniam ullam at qui ea, tempore, distinctio quibusdam!
                  Assumenda magnam nam harum reprehenderit fuga! Expedita iusto
                  non unde, debitis ab amet suscipit, sunt totam consectetur,
                  laborum alias similique earum ipsum ad quos dolorem dolorum?
                  Velit dolore voluptatem reiciendis voluptates exercitationem
                  distinctio similique in quis?
    </div>

Thanks in advance.

Answer 1

This will help you center the div well so that your code does not look bad when hoovering.

div{
    width: 300px;
    height: 300px;
    outline:1px solid red;
    overflow: hidden;
    padding: 5px;
    position: relative;
  }
  
  div:hover{
    padding:5px;
     outline: 4px solid blue;
  }

    <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Neque delectus illo eligendi ipsa fugit quod praesentium
                    ducimus provident? Et labore ipsa eos praesentium error fugiat
                    culpa impedit voluptatem iusto aliquam? Optio temporibus
                    impedit eaque ex dolores harum id quasi sed, voluptas odit
                    libero eos similique maxime at doloribus, ipsam inventore
                    alias odio veritatis, quod animi nisi doloremque! Repellat,
                    deleniti inventore. Officiis saepe facilis, cumque minima quo
                    velit facere sequi, libero iste dicta maiores debitis dolor
                    quas, eum excepturi aut. Cumque, eum exercitationem. Quod ex
                    itaque incidunt culpa, obcaecati est accusantium! Consectetur,
                    in asperiores alias dolore fuga debitis ad illo reiciendis
                    voluptas perferendis expedita iure blanditiis doloremque
                    veniam ullam at qui ea, tempore, distinctio quibusdam!
                    Assumenda magnam nam harum reprehenderit fuga! Expedita iusto
                    non unde, debitis ab amet suscipit, sunt totam consectetur,
                    laborum alias similique earum ipsum ad quos dolorem dolorum?
                    Velit dolore voluptatem reiciendis voluptates exercitationem
                    distinctio similique in quis?
  </div>

Answer 2

You can quickly achieve this by using outline instead of border for avoiding the content to move:

div{
  width: 300px;
  height: 300px;
  outline:1px solid red;
  overflow: hidden;
  position: relative;
}

div:hover{
  outline: 4px solid blue;
}

<div>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                  Neque delectus illo eligendi ipsa fugit quod praesentium
                  ducimus provident? Et labore ipsa eos praesentium error fugiat
                  culpa impedit voluptatem iusto aliquam? Optio temporibus
                  impedit eaque ex dolores harum id quasi sed, voluptas odit
                  libero eos similique maxime at doloribus, ipsam inventore
                  alias odio veritatis, quod animi nisi doloremque! Repellat,
                  deleniti inventore. Officiis saepe facilis, cumque minima quo
                  velit facere sequi, libero iste dicta maiores debitis dolor
                  quas, eum excepturi aut. Cumque, eum exercitationem. Quod ex
                  itaque incidunt culpa, obcaecati est accusantium! Consectetur,
                  in asperiores alias dolore fuga debitis ad illo reiciendis
                  voluptas perferendis expedita iure blanditiis doloremque
                  veniam ullam at qui ea, tempore, distinctio quibusdam!
                  Assumenda magnam nam harum reprehenderit fuga! Expedita iusto
                  non unde, debitis ab amet suscipit, sunt totam consectetur,
                  laborum alias similique earum ipsum ad quos dolorem dolorum?
                  Velit dolore voluptatem reiciendis voluptates exercitationem
                  distinctio similique in quis?
</div>