CSS Border Radius Examples

CSS Border Radius Examples
  • Proper Way to Give Radius to Your Website Edges, Know The Trick
  • Posted On : 2021-07-05 19:23:00 PM


CSS Border Radius Examples

You can apply a border-radius to any element to give it "rounded corners." You'll only notice if there's a huge change. For example, if the element has a different background color or border than the element it is over. Simple examples include:

#example-one {
  border-radius: 10px;
  background: #BADA55;
#example-two {
  border-radius: 10px;
  border: 3px solid #BADA55;


Although it is no longer necessary, you might prefix with -webkit- and -moz- for the best possible browser support:

.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; 


How to Doing Border Radius in CSS?

Take note of the sequence of those properties: the vendor prefixes are listed first, followed by the non-prefixed “spec” version. This is the proper method to go about it. The border radius is an excellent example of why we do it this way. The earlier -webkit- vendor prefix would perform something completely different than the “spec” version in a little more sophisticated variant of utilizing border-radius (where you give two values instead of one). As a result, if we just copy/paste the same values into all three properties, we may get different outcomes across browsers.

#example-three {
  border-radius: 20px;
  background: url(bglines.png); /* will get clipped */


Quick Contact !

Ask Question ?

Call Our Customer Care Executive. We Are Available 24x7 Just Dial.

+91 9810833751

Home | Contact | Sitemap © All Copyright 2021 Reserved ranbeersingh.com