How to create this CSS border

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;

possible duplicate of [CSS3 Gradient Borders](http://stackoverflow.com/questions/2717127/css3-gradient-borders) — Madara's Ghost, Apr 29 '12 at 11:58

Andrea Turri · Accepted Answer · 2012-04-29T12:07:11.923

3

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;
}

edited Apr 29 '12 at 12:07

answered Apr 29 '12 at 12:01

Andrea Turri

6,480
7
37
63

You should really post your code here as well. If jsfiddle goes down, your post is useless. – Josh Mein Apr 29 '12 at 12:03
You might want to check your fiddle in chrome. There seems to be an issue. – Josh Mein Apr 29 '12 at 12:09

score 2 · Answer 2 · answered Apr 29 '12 at 12:09

You can attain such a setup using new CSS3 facilities, namely border-radius and gradient form of background image. You can find information about those all around the internet, for example background gradient and border radius.

Below is example, it will not work in all browsers, and is not exactly what you want, but it should be enough to give you the basic idea:

The html structure could look like this:

<div id="big_div">
    Search for a hotel
    <div id="small_white_div">
    Some other content
    </div>
</div>

And the corresponding css would be:

#big_div {height:450px;width:250px;border-radius: 5px;background-color:red;
background-image: linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -o-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -moz-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)    
51%, rgb(33,51,140) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -ms-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%, 
rgb(33,51,140) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(33,51,140)),
color-stop(0.51, rgb(125,187,209)),
color-stop(1, rgb(33,51,140))
);}
#small_white_div {height:400px;width:220px;margin:auto;border-radius:5px;
background-color:white;margin-top:20px;}

Good luck.

score 1 · Answer 3 · answered Apr 29 '12 at 11:58

1

It's done with background image.

answered Apr 29 '12 at 11:58

Popcorn

49
1

You can do that via css, not only with background image. – Andrea Turri Apr 29 '12 at 12:09

score 0 · Answer 4 · answered Apr 29 '12 at 11:58

You are looking for border-radius to get the rounded corners. Try out something like this:

-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;

Note this is CSS3 and will not work in older versions of IE

How to create this CSS border

4 Answers4