views:

139

answers:

2

in the following code

<html>
<body>
<div style="height:400px; width:400px;  -moz-border-radius:100px; -webkit-border-radius:100px; border:3px solid #500;     background-color:#a00; overflow:hidden;">
Why is this getting cut at the beginning???
</div>
</body>
</html>

Why isn't the browser wrapping the text around the rounded corners. In webkit browsers(i tested both chrome and safari) the overflow hidden cuts the text outside the border. Firefox just renders text outside the border. I also tried this without overflow:hidden; but again the text just rendered outside the border.

+3  A: 

Use padding to adjust your content

padding-left:20px;
padding-top:50px;

Hence it looks like...

<div style="height:400px; width:400px;  -moz-border-radius:100px; -webkit-border-radius:100px; border:3px solid #500;     background-color:#a00; overflow:hidden;padding-left:20px;padding-top:50px;">
Salil
A: 

if your borders radius is 100px/ you should use that/

div.blabla{padding:36px;} 

this is a good padding ratio for divs with border-radius 36%/

spielersun
I am curious to know why that ratio is good? I like understanding different rules for design.
jessegavin
36% is minimum ofcourse/its for border-radius/because, border-radius can cut paragraphs inside of div/
spielersun