<html><head><style type="text/css">p.one {border-style: solid;border-width: 15px;border-left-color:red;min-height:50px;}</style></head><body><p class="one">...</p></body></html>
There are two ways, one is to directly insert a clear tag, the other is to use the after selector.
<!DOCTYPE html><html><head> <style type="text/css"> p.one{ border-style: solid; border-width: 15px; min-height:50px; position:relative; } p i{ position:absolute;min-height:80px;width:15px;top:-15px;left:-15px;background:red;} p:after{ content:'';position:absolute;min-height:80px;width:15px;top:-15px;right:-15px;background:red; } </style></head><body><p class="one"><i></i>...</p></body></html>This effect is much simpler using CSS3
If you don’t mind it, nest one layer to be compatible with old and new browsers:
...
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
