Designing css borders can be a real nuisance. Each web browser requires its own settings. Suppose you want to plot a simple div block with class -block and an edge radius of 4px. In order to solve the task a fancy CSS developed solutions can be used:
.div-block{
border: 1 px solid black /* Black corner surronding a div block */
-moz-border-radius: 4px; /* Firefox */
-webkit-border-radius: 4px; /* Safari in Google Chrome */
border-radius: 4px; /* Opera 10.5+, future browsers, Internet Explorer 6+ that uses IE-CSS3 */
}A new problem is recognised. IE browser using CSS2 does not support that kind of solution. On the page http://fetchak.com/ie-css3/ we can find another nice solution, howewer it can become difficult to implement it on the page using several nested div blocks. On the page where I use the rounded div block, frequently I don’t use just one of them, If you use several rounded div elements for buttons, menues, blocks for the title, article body, side menu, comments, footer, things becomes complicated. CSS z-indexes have to be set for elements. Consequenlty a new problem appears – different browsers requires different settings for z-indexes. What is more, consistency with some plug-ins (like galleries) has to be checked.
To avoid that kind of complications the solution is of course obvious – use images to make div borders. But: that can bring us to the excessive waste of time. Subsequently readaptation of colors, reshaping, changing sizes, especially dealing with many elements that consists of several images, can become a real nightmare. I would use this kind of solution for the site from which design won’t change in the future.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Functional div block with borders without using images <div id="div-block"><strong class="div-block-top"> </strong> <div class="div-block-content"> <h2>Rounded div blocks</h2> There is a css div block with rounded borders designed without using images, functional in all web browsers. </div> <strong class="div-block-bottom"> </strong> </div>