46 lines
758 B
Markdown
46 lines
758 B
Markdown
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;
|
|
}
|
|
```
|
|
|