Why this won't have border line on top, right and bottom but left?

Question

I want border line on top, bottom, left and right.
But my code apply to only left side somehow.

How can I fix it?

DEMO@JS FIDDLE

HTML

<div class="frame new"><img src="https://i.ytimg.com/vi/pco91kroVgQ/hqdefault.jpg" style="
    width: 480px;
    position: absolute;
    top:-48px;
    clip: rect(50px 480px 320px 0px);
    border:solid 1px #ccc;padding:4px;
"></div>

CSS

.frame {
    position: relative;
    display: inline-block;
    height: 270px;
    width: 480px;
    overflow: hidden;
    }
    .frame:after,
    .frame:before {
        position: absolute;
        display: block;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* new */
.new {
    padding: 1px;
    overflow: hidden;
    }

.new:after {
    background: red;
    content: "New"; 
    width: 100px;
    text-align: center;
    height: auto;
    color: #fff;
    font-family: 'Arial';
    font-weight: bold;
    padding: 5px 10px;
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
            transform: rotate(-30deg);
    left: -30px;
    top: 3px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

Answer 1

because the image is positioned absolute inside the div and it gets cropped, you can see it in the image I attached. You can apply the border to the .frame and it will work

Answer 2

The edits are -

• Removed position: absolute from img
• Removed height and width from the frame class

 .frame { position: relative; display: inline-block; overflow: hidden; } .frame:after, .frame:before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; } /* new */ .new { padding: 1px; overflow: hidden; } .new:after { background: red; content: "New"; width: 100px; text-align: center; height: auto; color: #fff; font-family: 'Arial'; font-weight: bold; padding: 5px 10px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); transform: rotate(-30deg); left: -30px; top: 3px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } 

 <div class="frame new"><img src="https://i.ytimg.com/vi/pco91kroVgQ/hqdefault.jpg" style=" width: 480px; top:-48px; clip: rect(50px 480px 320px 0px); border:solid 1px #ccc;padding:4px; "/></div>