Question

Hi guys i’m trying to create this(image) css border around a div, but having trouble.

I have created the border but cannot get the border to be smooth.
here is my code

border-left: 5px solid #036;
border-right: 5px solid #036;
border-top: 10px solid #036;
border-bottom: 5px solid #036;

Answer 1

Fiddle Up, You can see it here.

Hope it help.

EDIT:

Html:

<div class="a">
    <span class="abs">Title here?</span>
    <div class="b">
        Hello.                
    </div>
</div>​

Css:

div.a {
    border-top: 10px solid #333;
    border-left: 5px solid #333;
    border-bottom: 5px solid #333;
    border-right: 5px solid #333;
    border-radius: 10px;
    background-color: #333;
    width: 200px;
    height: 400px;
}
div.b {
    border-radius: 5px;
    background-color: #FFF;
    width: 180px;
    height: 350px;
    padding: 10px;
}

.abs {
    color: #FFF;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 10px;
}