How do you have round borders in html web pages?

I would like to have round corners at the borders on my web pages that would look more stylish than the normal sharp corners.


Hope you can help.

How do you have round borders in html web pages?
This border with round corners effect will only work if the curves are called up after the horizontal and vertical lines in the HTML code. This is because each new %26lt;div%26gt; is effectively a layer on top of the previous %26lt;div%26gt;.





By calling up the horizontal and vertical lines first, we can then layer the round curves on top of these lines through our CSS background commands. The outside colour of the curves is white (not transparent) and hides the sharp edges of the corners, creating our desired round corners effect.














Here is the Html code.





%26lt;div class="t"%26gt;%26lt;div class="b"%26gt;%26lt;div class="l"%26gt;%26lt;div class="r"%26gt;%26lt;div class="bl"%26gt;%26lt;div class="br"%26gt;%26lt;div class="tl"%26gt;%26lt;div class="tr"%26gt;


Lorem ipsum dolor sit amet consectetur adipisicing elit


%26lt;/div%26gt;%26lt;/div%26gt;%26lt;/div%26gt;%26lt;/div%26gt;%26lt;/div%26gt;%26lt;/div%26gt;%26lt;/...





And the CSS that makes a round corner border is:





.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}


.b {background: url(dot.gif) 0 100% repeat-x}


.l {background: url(dot.gif) 0 0 repeat-y}


.r {background: url(dot.gif) 100% 0 repeat-y}


.bl {background: url(bl.gif) 0 100% no-repeat}


.br {background: url(br.gif) 100% 100% no-repeat}


.tl {background: url(tl.gif) 0 0 no-repeat}


.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}





Play with it and see how it looks

flower arranging