joplin-notes/joplin notion extension/Web Development/CSS/partial border.md

partial border https://unused-css.com/blog/css-partial-borders/

<div class="pseudo-partial-border">Pseudo Partial Border</div>

.pseudo-partial-border {
  position: relative;
  width: 250px;
  height: 41px;
  padding: 7px;
  margin: 25px;
  background: lightgray;
  border: none;
  text-align: center;
}

Before and after pseudo elements

.pseudo-partial-border::before,
.pseudo-partial-border::after {
  position: absolute;
  width: 33px;
  height: 20px;
  content: "";
}

.pseudo-partial-border::before {
  left: 0;
  top: 0;
  border-left: 3px solid black;
  border-top: 3px solid black;
 }

.pseudo-partial-border::after {
  right: 0;
  bottom: 0;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
 }