CODEWITHSUNDEEP
htmlcss
Techagesite
Techagesite

Reputation: 475

Css border-radius not going around my div container

I have a rounded border with css border-radius which isn't going around my container2 div. You can see it in this jsfiddle. For some reason it shows partial but is above the container2 and not around it.

Can anyone help me with why its doing this?

Upvotes: 1

Views: 834

Answers (4)

Mustafa sabir
Mustafa sabir

Reputation: 4360

The problem is due to the property 

"float :left"

of your inner div elements. You have specified "float:left" for your inner div but not outer div so this disrupts the proper formatting of the dom elements and hence only setting the border property separately for outer div. Either remove "float:left" from all divs css or add them in all . Also remove the

border-top:4px;

property from .container2 to display the top border correctly. Here is the working fiddle 

http://jsfiddle.net/Ad5zy/8/

Upvotes: 2

Ezhil
Ezhil

Reputation: 1006

   try this 
   .container2 {border: 2px solid #006699;
    border-top:4px;
    padding-bottom:4px;
    padding-top:4px;
    padding-right:4px;
    padding-left:4px;
    width: 100%;
    clear:both;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
     border-radius: 15px;
     float:left;//you miss this

Upvotes: 1

Tushar
Tushar

Reputation: 4418

Remove border-top: 4px; for .container2

updated demo

Upvotes: 0

Itay
Itay

Reputation: 16777

You should add overflow: hidden so the content won't overflow from the container.

Also you should remove the border-top: 4px. It makes the top border white.

jsFiddle Demo

Upvotes: 2

Related Questions