Give a rounded corners to any element using the CSS border-radius property.
.round-edge {
border-radius: 10px;
}
The border-radius property will work exactly the way you want, but this would be considered as best practise
.round-edge {
-webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
-moz-border-radius: 12px; /* Firefox 1-3.6 */
border-radius: 10px; /*Others*/
}
if you want to keep the one corner as it is , just do as below
.round-edge {
border-radius: 10px;
border-bottom-left-radius: 0;
}
If you want to give different numbers to the edges, do the following code.
.round-edge-diff {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 1px;
}
Did this post help you?
Tutsplanet brings in-depth and easy tutorials to understand even for beginners. This takes a considerable amount of work. If this post helps you, please consider supporting us as a token of appreciation:
- Just want to thank us? Buy us a Coffee
- May be another day? Shop on Amazon using our links.
Your prices won't change but we get a small commission.