If you are using Firefox or Safari you will see that all four corners of this div are rounded with a radius of 5px
For the same effect use:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:10px;
If you are using Firefox or Safari you will see that selected corners are rounded with a radius of 20px
For the same effect use:
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 20px;
Border colours are also possible
For the same effect use:
border-top: 10px solid #ff0066;
border-left: 10px solid #0066ff;
border-right: 10px solid #0066ff;
border-bottom: 10px solid #ff0066;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
Dotted border colours are possible. (The display of this varies between Firefox and Safari).
For the same effect use:
border-top: 10px dotted #ff0066;
border-left: 10px dotted #0066ff;
border-right: 10px dotted #0066ff;
border-bottom: 10px dotted #ff0066;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;Inset border colours are possible
For the same effect use:
border-top: 10px inset #ff0066;
border-left: 10px inset #0066ff;
border-right: 10px inset #0066ff;
border-bottom: 10px inset #ff0066;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;