Comment créer cette bordure CSS

Question

Salut les gars, je suis en train de créer this (image) frontière css autour d'un div, mais ayant des problèmes.

J'ai créé la bordure, mais la bordure ne peut pas être lisse. ici est mon 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, vous pouvez le voir here.

J'espère que cela vous aidera.

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

Answer 2

Vous cherchez rayon de frontière pour obtenir les coins arrondis. Essayez quelque chose comme ceci:

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

Notez que cette CSS3 et ne fonctionnera pas dans les anciennes versions de IE

Answer 3

Il est fait avec l'image d'arrière-plan.

Answer 4

Vous pouvez obtenir une telle configuration à l'aide de nouvelles installations de CSS3, à savoir rayon frontière et forme gradient de l'image d'arrière-plan. Vous pouvez trouver des informations sur ceux qui sont partout sur Internet, par exemple background gradient et border radius.

Ci-dessous est par exemple, il ne fonctionnera pas dans tous les navigateurs, et n'est pas exactement ce que vous voulez, mais il devrait être suffisant pour vous donner l'idée de base:

La structure html pourrait ressembler à ceci:

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

Et le correspondant css serait:

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

Bonne chance.