CODEWITHSUNDEEP
htmlcss
user3210416
user3210416

Reputation: 804

How to add a colour circular border in HTML CSS

I have rounded an image in html/css but now I want to add an border around that image. The only problem is that no border is showing.

Here is my code HTML

<img src="smiling.png" class = "roundedImage" style =width:20px;height:20px;>

Here is the CSS code

.roundedImage {

background-repeat: no-repeat;
background-size: cover;

border-width: 1px;
border-color: Black;
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;

}

The image shows rounded but no colour border.

Upvotes: 1

Views: 3163

Answers (4)

Asha Devyani
Asha Devyani

Reputation: 21

In your css just add border-color: 1px solid black; . This will give your border color

Upvotes: 0

Evochrome
Evochrome

Reputation: 1215

This should do the trick(not px but %): 

.roundedImage {
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

}

And the border style has to be solid, otherwise you'll see no line at all :)

http://jsfiddle.net/4mezhws7/

Upvotes: 2

Chris Pateman
Chris Pateman

Reputation: 559

I believe it to be that you have a space between 'class' and the equals sign. Space between the equal sign and the speech mark. A space between 'style' and the equal sign. Plus no speech marks around your style content and no back slash to end the img tag.

Finally, what I really think it is, is you need a border style.

Border-style: solid;

Upvotes: 0

carlosHT
carlosHT

Reputation: 493

For border you could do:

border: 1px solid black;

And then you could remove these:

border-width: 1px;
border-color: Black;

Or just add (as pointed out by @Steve Sanders):

border-style: solid;

Upvotes: 4

Related Questions