CSS Border Blending/Transparency

Question

So I am trying to get the top and left side of this border to blend into the background, i.e. so there is not a visible line along the edge. I am using the inset value on the border-shadow to appear that these edges blend in, although there seems to be a visible edge where the border is.

Please see snippet:

HTML:

<article class="para">
    <h2> X-cessive Overview </h2> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium lectus eget risus tempor eleifend. Nulla facilisi. Mauris non ultrices mi, in tristique enim. Nulla facilisi. Nullam dapibus consectetur eros, sed eleifend ligula tincidunt id. Curabitur non velit non elit volutpat accumsan iaculis id elit. Nullam quis tortor maximus, laoreet sapien id, gravida nibh. Nunc tempor justo gravida magna sodales euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et diam suscipit, varius ante sagittis, bibendum dolor. Nunc pellentesque molestie.
</article>

CSS:

.main {
	background-image: url(../images/backgrounds/exile-main1.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 400px;
	color: #000;
	border-bottom: 2px solid #939799;
}
.main h1 {
	position: relative;
	top: 40px;
	left: 30px;
	color: #424040;
	font-size: 2em;
}
.para {
	width: 33%;
	border-right: 2px solid rgb(237,36,62);
	border-bottom: 2px solid rgb(237,36,62);
	border-top: 10px transparent;
	border-left: 10px transparent;
	padding: 15px;
	position: relative;
	left: 140px;
	top: 110px;
	font-size: 1em;
	border-radius: 20px 20px 20px 20px;
	box-shadow: 20px 20px 60px #fff inset;
	background-color: #939799;	
}
.para h2 {
	font-size: 1.2em;
	text-decoration: underline;
}

<article class="para">
    <h2> X-cessive Overview </h2> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium lectus eget risus tempor eleifend. Nulla facilisi. Mauris non ultrices mi, in tristique enim. Nulla facilisi. Nullam dapibus consectetur eros, sed eleifend ligula tincidunt id. Curabitur non velit non elit volutpat accumsan iaculis id elit. Nullam quis tortor maximus, laoreet sapien id, gravida nibh. Nunc tempor justo gravida magna sodales euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et diam suscipit, varius ante sagittis, bibendum dolor. Nunc pellentesque molestie.
</article>

Here is a Screenshot so you can better see the issue.

Answer 1

You can adjust the box-shadow on .para to something like: box-shadow: 45px 15px 70px #fff inset

And if the text needs to on top of the grey, add more left padding to .para like: padding: 15px 15px 15px 40px;

.main {
	background-image: url(../images/backgrounds/exile-main1.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 400px;
	color: #000;
	border-bottom: 2px solid #939799;
}
.main h1 {
	position: relative;
	top: 40px;
	left: 30px;
	color: #424040;
	font-size: 2em;
}
.para {
        width: 33%;
        border-right: 2px solid rgb(237,36,62);
        border-bottom: 2px solid rgb(237,36,62);
        border-top: 10px transparent;
        border-left: 10px transparent;
        padding: 15px 15px 15px 46px; /* Adjust this */
        position: relative;
        left: 140px;
        top: 110px;
        font-size: 1em;
        border-radius: 0 20px 20px 20px; /* Adjust this */
        box-shadow: 45px 15px 70px #fff inset; /* Adjust this*/
        background-color: #939799;
}
.para h2 {
	font-size: 1.2em;
	text-decoration: underline;
}

<article class="para">
					<h2> X-cessive Overview </h2> 
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium lectus eget risus tempor eleifend. Nulla facilisi. Mauris non ultrices mi, in tristique enim. Nulla facilisi. Nullam dapibus consectetur eros, sed eleifend ligula tincidunt id. Curabitur non velit non elit volutpat accumsan iaculis id elit. Nullam quis tortor maximus, laoreet sapien id, gravida nibh. Nunc tempor justo gravida magna sodales euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et diam suscipit, varius ante sagittis, bibendum dolor. Nunc pellentesque molestie.

				</article>