JSFiddle - React, Tailwind, and code Playground

HTML

<div id="boxOuter">
    <div id="box">THANK YOU!</div>
</div>

<br>
<div>I don't like the "darker" corners!</div>
<div>Also, I want the gardient to be "partially visible" behind<br>the border...</div><br>
<div>The size of the border shall stay as 10px.</div><br>
<div>&copy; JCOC611.</div>

CSS

#box{
    background-color:#ccc;font-weight:bold;
    text-align:center;
    line-height:100px;
    height:100px;
    vertical-align:middle;
    font-size:20px;
}
#boxOuter {
    background: rgba(0,0,0,0.5); width:300px; padding-left: 10px;
    margin-left:25px;
}
body{
    background:url(http://www.adamdorman.com/_images/gradient.jpg) no-repeat;  
}