Rounded corners with CSS
Upon creating this site I realized that there are three different families of CSS-tags that can be used for generating rounded corners. One for CSS3, one for Mozilla and one for Webkit. CSS3: div#round{ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-radius: 10px; //All corners at once } Mozilla: div#round{ -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-tadius: 10px; //All corners at once } Webkit: div#round{ -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-radius: 10px; //All corners at once } They are very similar and yields the same visual result and can be combined for multi-browser support. div#round{ border-radius: 10px; -moz-border-tadius: 10px; -webkit-border-radius: 10px; }

Write a comment

Name or handle

E-mail (optional and not visible to others)

Comment


Code from above