Advanced Search

Css3 rounded corners

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The code for this example above is actually quite simple:
  2.  
  3. <div style=" background-color: #ccc;
  4. -moz-border-radius: 5px;
  5. -webkit-border-radius: 5px;
  6. border: 1px solid #000;
  7. padding: 10px;" >
  8.  
  9. These different corners can also each be handled on their own, Mozilla has other names for the feature than the spec says it should have though, as it has f.i. -moz-border-radius-topright as opposed to -webkit-border-top-right-radius:
  10. Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.
  11.  
  12. Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.
  13.  
  14. Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.
  15.  
  16. Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.
  17.  
  18. These are handled by / should be handled by:
  19.  
  20.     * -moz-border-radius-topleft / -webkit-border-top-left-radius
  21.     * -moz-border-radius-topright / -webkit-border-top-right-radius
  22.     * -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
  23.     * -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

URL: http://www.css3.info/preview/rounded-border/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.