initial

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

@@ -0,0 +1,46 @@
+partial border
+https://unused-css.com/blog/css-partial-borders/
+
+```html
+<div class="pseudo-partial-border">Pseudo Partial Border</div>
+```
+
+```css
+.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
+
+```css
+.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;
+ }
+```
+