document.querySelector(".clickedelement").addEventListener("click", function (e) {
  // add and remove border on div
});

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50%;
  border: 2px solid #ff000000;
  transition: border 2s ease-out;
}

.clickedelement:active~div{
  border: 2px solid #ff0000;
  transition: border 100ms ease-out;
}

<p class="clickedelement">when this is clicked i want border added and removed (after 1s) on div below</p>
<div class=""></div>