Round Cornered Borders and Boxes by CSS

While nice looking round cornered borders and boxes are created by using CSS and images, they do not provide the flexibility to change color of the borders and / or the background of box easily as this involves creation of fresh sets of images for each color and uploading them to the server. Nifty corners provide CSS for Round cornered boxes ( without borders ).

We have modified Nifty corners CSS to create round cornered borders and boxes by CSS without using any image. As the corners have been created by using only CSS without using any image, the corners are not as smooth as those created by using images, but you will find that they are quite nice and provide flexibility and ease of use. The color of the border or that of the background can be changed just by changing its hex value in the CSS. The width of the boxes can be changed by changing the width of the container < div > and the height can be changed by changing the height of the content < div >. The boxes have been tested in Internet Explorer, Firefox, Opera and Google Chrome and look same in all browsers. However, print purview / print is supported in Firefox and Opera but not in Internet Explorer and Google Chrome. Therefore, a link to print.css file may be added in the < head > portion of the page to stop printing of rounded portion of the boxes.

Round Cornered boxes with border thickness 1px

Round Cornered boxes with border thickness 2px

Round Cornered boxes with border thickness 3px