JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>green box, orange borders</title>
</head>
<body>
<div>
<div>
Very long content, very long content, very long content, very long content, very long content,
very long content, very long content, very long content, very long content, very long content!<br />
Content<br />Content<br />Content<br />Content<br />Content<br />
Content<br />Content<br />Content<br />Content<br />Content<br />
Content<br />Content<br />Content<br />Content<br />Content<br />
Content<br />Content<br />Content<br />Content<br />Content<br />
Content<br />Content<br />Content<br />Content<br />Content<br />
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* common */
* {
margin: 0 ;
padding: 0 ;
border: 0 none ;
}
html, body {
width: 100% ;
height: 100% ;
}
/* green box, orange borders */
body > div {
position: absolute ;
margin: -200px 0 0 -350px ;
top: 50% ;
left: 50% ;
width: 700px ;
height: 400px ;
background-color: lightgreen ;
}
body > div::before,
body > div::after {
position: absolute ;
content: "" ;
/*z-index: -1 ;*/
}
body > div::before {
margin: -30px 0 0 -150px ;
left: 50% ;
width: 300px ;
height: 430px ;
border-top: 15px solid orange ;
border-bottom: 15px solid orange ;
/* demonstration */
border-left: 1px dotted grey ;
border-right: 1px dotted grey ;
}
body > div::after {
margin: -100px 0 0 -30px ;
top: 50% ;
width: 730px ;
height: 200px ;
border-left: 15px solid orange ;
border-right: 15px solid orange ;
/* demonstration */
border-top: 1px dotted grey ;
border-bottom: 1px dotted grey ;
}
/* content */
div > div {
width: 700px ;
height: 400px ;
overflow: auto ;
}
div > div:hover {
background-color: lightblue ;
}