The Basics of Border-Radius in CSS

Border radius can be an excellent way to improve the visual effects. In addition, it can add lively effect to the webpage. However, here in this article, we are going to discuss about the cleverer ways of using the border-radius in CSS.
However, elements can be given rounded corners by the application of the border-radius in the CSS. It will be noticed if there is a change of color. Here is a simple example:

.div {
  border-radius: 10px;
  background: #BADA55;
}

And just to cover yourself for multiple browsers (Friefox, and older browsers), you should include:

.div {
  border-radius: 10px;
  background: #BADA55;
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
}

You can also create circles out of elements including images. For example, let’s say you have:

<img src="arnold.png">

You can add:

img {
border-radius: 50%;
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
}

And the result is

You can do the same for images in the background of elements, but you’ll have to play with the sizing of the elements and the subsequent clipping:

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

You can also user border-radius in combination with the border property:

.div {
border-radius: 50%;
background: #666;
border: 5px solid #000;
width: 150px;
height: 150px;
}

That results in:

We’ll dive deeper into border-radius in future posts, but these are the basics!