Circular elements in CSS

Note that this technique works only on square elements. So for example you have a square selfie of yourself, say of 500px X 500px and you want to give it dashing circular look rather than that dull square photo. Here’s a quick tip for making it a perfect circle.

img {
  border-radius: 100%;
}

Actually, if you try it out with 50%, you will a perfect circle anyways. But I double it to cover up any paddings or margins which affect the height and width and ultimately the border. You may add any extra properties to make it look more nice. Like for example:

img {
  border-radius: 100%;
  border: 2px solid #2980b9;
  margin: 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}

Well. That’s all. If you have any other idea, feel free to share it. Thanks for reading.

Advertisements

Your Thoughts -

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s