How JustAnswer Works:
  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.
Ask Jess M. Your Own Question
Jess M.
Jess M., Computer Support Specialist
Category: Software
Satisfied Customers: 561
Experience:  Computer Software Support specialist for more that 10 years
49766785
Type Your Software Question Here...
Jess M. is online now
A new question is answered every 9 seconds

I want to use CSS to have a border that is a circle and this

Customer Question

I want to use CSS to have a border that is a circle and this border will be around an image.The image will be border-radius:100%. Something like this:img.round-border {
background:url(rhttp://www.clipartkid.com/images/661/rope-clip-art-at-clker-com-vector-clip-art-online-royalty-free-JNQrTe-clipart.png);
background-repeat: no-repeat;
background-repeat:no-repeat;
background-size:220px 220px;
border-radius: 50%;
height:200px;width:200px;
border:3px solid red;
}
Submitted: 5 months ago.
Category: Software
Expert:  Seth Merrick explains replied 5 months ago.

Hi,

Thanks for contacting JustAnswer!

This is Seth.

Question:

What have you already tried, or done in terms of troubleshooting?

Customer: replied 5 months ago.
nothing yet, just want to have the image as a circle and a border image as a circle around the image
Expert:  Seth Merrick explains replied 5 months ago.

Thanks.

Is this live on the web anywhere?

Or can you post the work you already have / are doing / in-progress to a URL that I could a look at?

I'd like to see it in context.

Customer: replied 5 months ago.
post it here, just please make sure it works
Expert:  Seth Merrick explains replied 5 months ago.

so, for the HTML you need to use the same class:

  • <img class="img.round-border" src="kitten.jpg">

Also: if you want to keep things perfectly round, use an image with the same width and height. Anything else will still be rounded, but you'll end up with an elliptic shape which may or may not be desirable.

Expert:  Seth Merrick explains replied 5 months ago.

Problems with your CSS -- always run it through a validator!:

https://jigsaw.w3.org/css-validator/validator

... the URL is wrong in:

background:url(rhttp...

you made a typo, it says "rhttp" instead of "http"

Customer: replied 5 months ago.
please show me a working solution, the stackoverflow does not explicitly define the correct answer, nor show one.
Expert:  Seth Merrick explains replied 5 months ago.

Thanks,

I just noticed there is a typo in your CSS code.

Where you wrote, "

background:url(rhttp

"

you made a typo, it says "rhttp" instead of "http"

... please delete the 'r' so it just says http

Customer: replied 5 months ago.
I am looking for a solution to this issue, please provide the exact solution, not someone else question, thanks.
Customer: replied 5 months ago.
got it...
Expert:  Seth Merrick explains replied 5 months ago.

"got it"?

were you able to resolve the issue?!