Rounded corners with CSS on your site 5 minutes
Modern web pages, especially if structured correctly using the fogli di stile CSS, you see more and more layout with the so called rounded corners, or the box in which the text appears or menu Site, have rounded corners.
Undoubtedly, the effect is much nicer than the old rectangular box, not found? 🙂
There are several methods to generate these windows rounded, andiamone to examine 3: an automatic generator of code, a tutorial that uses css / xhtml, and one that uses the new CSS3, which is the most innovative because it does not use the images to the corners, but the rendering is done via CSS (nb The css3 is only supported by the latest browsers!).
The automatic generator, from which comes the image shown above, is within this address.
E'probabilmente the most suitable method for beginners, because it will be enough to select the background color and the color of the box, ENVIAR press and will be generated preview and the code to paste. Do not forget to also copy the 4 CORNER IMAGES, and copy them to your own server.
obviously, to make it larger to accommodate an entire web page, must act on css, modifying the parameters WIDTH and HEIGHT, maybe setting them in pixels and not in percentage.
The second method uses CSS and XHTML, and is located at this address.
Even in this case, you just copy the code in xhtml page, and in the css stylesheet, and upload to your server the ONLY image represented by the gray circle.
The code, in fact, breaks the circumference 4 cloves and creates 4 corners.
The last method is the most advanced, because it exploits the potential of the new CSS3, made available by the latest browsers like Firefox, Safari, and Internet Explorer 8 (Finally). Spreader is to consult this address.
Usual, simply copy the code html and css in their respective places, to exploit the properties of the RADIUS BORDER css, that will generate the angles in real time, without using external images. Obviously IE7 and other older browsers do not support the css3, but in the article explains how to use a version with external images IF is detected an old browser, so you do not have compatibility problems.
Do not prefer other methods that create rounded corners like those in Java, avendo una naturale avversione per quest’ultimo 🙂