How to create a border in CSS3

CSS3 is greatly appreciated by developers who would like to create a website which excels in loading time. Various CSS3 properties and functionalities allow element styling without using a background image. Creating a border in CSS3 is a perfect example of this great property. For a normal border with square angles you could of course still make use of border: 1px solid black;. CSS3 also supports the design of round corners by means of the border-radius property. To guarantee a correct Mozilla Firefox display of these round corners the border-radius functionality needs to be combined with the moz-border-radius. The border-radius values which need to be used in the short border-radius version are:  upper left – upper right – bottom right – bottom left, which would look like:

.rounded-corners{
border-radius: 8px 6px 4px 2px
-moz-border-radius: 8px 6px 4px 2px
}


Was this useful?