You can give any element "rounded corners" by applying a
border-radius through CSS. You'll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it's over. Simple examples:
CSS
#example-one {
border-radius: 10px;
background: #BADA55;
}
#example-two {
border-radius: 10px;
border: 3px solid #BADA55;
}
For the best browser support, you should prefix with
CSS
.round {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
#example-one {
border-radius: 10px;
background: #BADA55;
}
#example-two {
border-radius: 10px;
border: 3px solid #BADA55;
}
For the best browser support, you should prefix with
-webkit- and -moz-:CSS
.round {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
No comments:
Post a Comment