Border not showing in CSS even after labeling them !important : <p>Here is the code for this particular <code>div</code>:</p>

<pre><code>.generated_text {
    display: inline-block;
    width: 50px;
    font-family:'Gudea' !important;
    text-align: left;
    color:#000 !important;
    background:#fff !important;
    border: 30px !important;
    border-color: #4b4b4b !important;
    position: absolute;
    top: 54%;
    left: 38.5%;
    margin: -150px 0 0 -150px;
    width:560px;
    height:170px;
}
</code></pre>

<p>Here is the result:
<a href="https://i.stack.imgur.com/qNVen.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qNVen.png" alt="enter image description here"></a></p>

<p>Note, I'm very new when it comes to web dev. Any help would be much appreciated and let me know if i'm missing anything in this post. </p>
