I have the CSS for the basic design of this rounded box. I have pasted that below. I'm trying to add a blue border with the following design effect (please see image below). Firstly is this possible? If so, any suggestions would be great..
I tried adding just a top border, but it doesn't quite give it the effect i'm looking for.
.contentbox {
border-style: solid;
border-width: 2px;
border-color: rgb(54, 81, 143);
border-radius: 10px;
background-color: rgb(255, 255, 255);
opacity: 0.2;
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
left: 190px;
top: 324px;
width: 100%;
height: 524px;
z-index: 118;
}
This Codepen uses different border widths to create a similar effect to what is pictured in the example.
Good luck, and I hope this helps.
html, body { perspective: 100px; height: 100%; width: 100%; margin: 0; } div { margin: 20px; border-style: solid; border-width: 4px 1px 1px 1px; border-color: rgb(54, 81, 143); border-top-color: blue; border-radius: 10px; background-color: rgb(255, 255, 255); box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03); position: absolute; width: 100px; height: 100px; }
<div></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.