This example page accompanies the article CSS Rounded Corners - a feature you may not be familiar with.
This is a standard border around this text, which is created using CSS to set the colour, size & design of the border.
The CSS code to create the border is:
border: 7px red solid;
... and this CSS code is used on all the boxes below.
This is a rounded corner border example around this text, which is achieved by telling the browser that the corners should be curved. Each corner is given a different sized curve to highlight how the corners can be separated, and you should see each corner (working clock-wise from the top left corner) getting bigger.
The CSS 3 code to create the rounded corners (works in Google Chrome):
border-top-left-radius: 5px 5px;
border-top-right-radius: 15px 15px;
border-bottom-right-radius: 25px 25px;
border-bottom-left-radius: 35px 35px;
The Webkit code to create the rounded corners (works in Apple Safari & Google Chrome):
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 25px 25px;
-webkit-border-bottom-left-radius: 35px 35px;
The Mozilla CSS code to create the rounded corners (works in Firefox):
-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 15px 15px;
-moz-border-radius-bottomright: 25px 25px;
-moz-border-radius-bottomleft: 35px 35px;
This is a rounded corner border example around this text, which is achieved by telling the browser that the corners should be curved. Each corner is given a different sized curve that won’t create an even curve to highlight the two points don’t have to match to make a curve.
The CSS 3 code to create the rounded corners (works in Google Chrome):
border-top-left-radius: 5px 35px;
border-top-right-radius: 15px 45px;
border-bottom-right-radius: 25px 75px;
border-bottom-left-radius: 35px 185px;
The Webkit code to create the rounded corners (works in Apple Safari & Google Chrome):
-webkit-border-top-left-radius: 5px 35px;
-webkit-border-top-right-radius: 15px 45px;
-webkit-border-bottom-right-radius: 25px 75px;
-webkit-border-bottom-left-radius: 35px 185px;
The Mozilla CSS code to create the rounded corners (works in Firefox):
-moz-border-radius-topleft: 15px 35px;
-moz-border-radius-topright: 25px 45px;
-moz-border-radius-bottomright: 35px 75px;
-moz-border-radius-bottomleft: 245px 185px;