Css Snippets » border radius http://www.csssnippets.be Snippets for you, snippets for me Mon, 17 Oct 2011 08:42:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Border-radius: maak ronde hoeken met CSS http://www.csssnippets.be/2009/10/border-radius-maak-ronde-hoeken-met-css/ http://www.csssnippets.be/2009/10/border-radius-maak-ronde-hoeken-met-css/#comments Thu, 15 Oct 2009 07:30:57 +0000 Mark http://www.csssnippets.be/?p=418 Met de komst van CSS3 is het mogelijk via CSS ronde hoeken te bepalen voor elementen, momenteel hebben enkel FireFox/Mozilla en Safari 3 deze optie geïntrigeerd.
Andere browsers zullen het dus voorlopig nog zonder moeten doen, maar hoe gebruik je nu border-radius?

CSS3 (nog niet klaar!!)

CSS

#foo {
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 10px;
}
#foo {
border-radius: 5px; /*alle hoeken hetzelfde*/
}

Safari/webkit

CSS

#faa {
webkit-border-top-right-radius: 10px;
webkit-border-bottom-right-radius: 5px;
webkit-border-bottom-left-radius: 5px;
webkit-border-top-left-radius: 10px;
}
#faa {
webkit-border-radius: 5px; /*alle hoeken hetzelfde*/
}

FireFox/Mozilla

CSS

#fee {
moz-border-radius-topright: 10px;
moz-border-radius-bottomright: 5px;
moz-border-radius-bottomleft: 5px;
moz-border-radius-topleft: 10px;
}
#fee {
moz-border-radius: 5px; /*alle hoeken hetzelfde*/
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/10/border-radius-maak-ronde-hoeken-met-css/feed/ 0