CODEWITHSUNDEEP
htmlcssbootstrap-4
Jason G
Jason G

Reputation: 200

How do I make Bootstrap image rounded?

I cannot seem to get my images in a perfect circle using:

.rounded {
    border-radius: 50px!important;
}

Is there another CSS setting I should use? The top and bottom of the image still have a horizontal line, even if I raise more than 50px.

enter image description here

enter image description here

Upvotes: 5

Views: 19188

Answers (4)

raven404
raven404

Reputation: 1197

if you are using bootstrap simply use class .rounded-circle

<img src="img.jpg" class="rounded-circle" alt="img">

you can use this css property as well 

  width: 50%;
  height: 50%;
  border-radius: 50%;

Upvotes: 8

Rohan Rao
Rohan Rao

Reputation: 2603

Try this:

.rounded{
  border-radius:50% !important; 
 }

Pixel values don't contribute much in terms of enhancement such in your case. Use % instead. You will get fully rounded shape the way you want.

Upvotes: 2

Abdul Moeez
Abdul Moeez

Reputation: 1401

Instead of using border-radius:50px prefer to use border-radius:50% or 100px. I have attach the snippet as a example. Please feel free to comment if you still face an issue. 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Rounded Images</h2>

<img src="https://i.pinimg.com/originals/7f/24/d8/7f24d81c34fc9ed92e5d1a71c1969d36.png" style="width:100px; border: 2px solid black;">

</body>
</html>

Upvotes: 1

CanUver
CanUver

Reputation: 1774

What kind of structure is image in ? If it is in a card structure, each card for bootstrap comes with certain settings automatically. If you are using a card, you can try removing the borders that are exclusive to the card. Like: 

.card{
 border: 0;  
}

If you just want the picture to be completely round, you need to define the width and height values the same. Like: 

width: 50px;
height: 50px;
border:radius: 50%;

If your problems are not one of them please share more information and code.

Upvotes: 0

Related Questions