How to create a popup with partial left border? - css

Question

I have to create this modal with same style:
This is what I have right now:
.notification {
position: fixed;
top: 32px;
right: 32px;
width: 460px;
height: 150px;
border-radius: 36px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
background-color: white;
z-index: 999999;
}
.notification > .border {
background-color: #3fb4e4;
margin-left: 20px;
border-radius: 36px;
width: 34px;
height: 150px;
}
<div class="notification"><div class="border"></div>Hello</div>
But I cant find a way to create the blue border on the left.

Answer 1

Use multiple background like below:
.notification {
border-radius: 36px;
padding:50px;
width:100px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14);
/* Relevant code*/
border:3px solid transparent; /* Control the thickness*/
background:
/* Cover only the padding area*/
linear-gradient(#fff,#fff) padding-box,
/* Cover the border area: adjust the 50px to control the size */
linear-gradient(to right, #3fb4e4 50px,transparent 0) border-box;
}
<div class="notification">Hello</div>
Another syntax where you can control the size outside the gradient:
.notification {
border-radius: 36px;
padding:50px;
width:100px;
box-shadow:
0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14);
/* Relevant code*/
border:3px solid transparent; /* Control the thickness*/
background:
/* Cover only the padding area*/
linear-gradient(#fff,#fff) padding-box,
/* Cover the border area */
linear-gradient(#3fb4e4,#3fb4e4) left border-box no-repeat;
background-size:50px 100%;
transition:0.6s;
}
.notification:hover {
background-size: 100px 100%;
}
<div class="notification">Hello</div>

Answer 2

Why not just add a border on the container itself:
.notification {
position: fixed;
top: 32px;
right: 32px;
width: 460px;
height: 150px;
border-radius: 36px;
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);
background-color: white;
z-index: 999999;
border-left: 3px solid #3fb4e4;
}