CODEWITHSUNDEEP
htmlcss
Greg Guida
Greg Guida

Reputation: 7512

How do i make my text wrap in a <div> with a large border radius

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.

Upvotes: 4

Views: 4620

Answers (2)

spielersun
spielersun

Reputation: 172

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%/

Upvotes: 1

Salil
Salil

Reputation: 47482

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

Upvotes: 4

Related Questions