css & box-shadow & outline

CSS3 box-shadow : 4 sides symmetry

https://learning.xgqfrms.xyz/CSS3/box/box-shadow/box-shadow-4sides-symmetry.html

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_outline

demo

overwrite el-card border

@charset "utf-8";

.clickable{
  cursor: pointer;
}

.not-clickable{
  cursor: default;
}

[data-class="selected"] {
  box-sizing: border-box;
  // border: 1px solid red;
  // width: calc(100% - 2px);
  // height: calc(100% - 2px);
}

[data-class="not-selected"] {
  box-sizing: border-box;
  // border: 0;
}

[data-class="selected"] > div.el-card {
  border: 1px solid red !important;
  box-shadow: 0px 0px 5px 5px #f00;
  // outline: 3px dotted green;
}

[data-class="not-selected"] > div.el-card {
  border: 1px solid #EBEEF5;
}