Rounding Specific Corners with CSS

Supplemental 24 views
0
0 Flares 0 Flares ×

Here are two different snippets showing how to round off specific corners using CSS. Both do the same thing but the first code is better as it’s shorter but the second piece of code illustrates which corner is which.

#div {  
    -webkit-border-radius: 4px 3px 6px 12px;  
    -moz-border-radius: 4px 3px 6px 12px;  
    -o-border-radius: 4px 3px 6px 12px;  
    border-radius: 4px 3px 6px 12px;  
}  
  
/* 2nd syntax split up into each line */  
#div {  
    -webkit-border-top-left-radius: 4px;  
    -webkit-border-top-rightright-radius: 3px;  
    -webkit-border-bottom-rightright-radius: 6px;  
    -webkit-border-bottom-left-radius: 12px;  
      
    -moz-border-radius-topleft: 4px;  
    -moz-border-radius-topright: 3px;  
    -moz-border-radius-bottomright: 6px;  
    -moz-border-radius-bottomleft: 12px;  
}  
Posted in CSS

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×