Home/ Questions/Q 9318605
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T03:10:16+00:00

I am trying to make a square picture circular using css 3. per request

  • 0

I am trying to make a square picture circular using css 3.

per request posting my entire code
html

<!DOCTYPE html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Hello</title>
    <link type="text/css" href="home_page.css" rel="stylesheet" />
  </head>
  <body>
<span class="image-wrap " style="display:inline-block; background:url(pic1.png);">
<img src="pic1.png" style="opacity: 0;"></span>
 </body>
</html>

css:inside home_page.css

.image-wrap {
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to set the <img> to display: block and set its border-radius, instead of or in addition to the parent element. Also you can use 50% for circular elements. And remove opacity: 0 from the image or it will be invisible. I’ve included a background-image: url() example as well, in case that is your issue.

    Demo: jsFiddle

    Output:

    enter image description here

    CSS:

    .circle {
    border: 1px solid black;
    border-radius: 50%;
    display: inline-block;
}
.circle img {
    border-radius: 50%;
    display: block;
}
.background-circle {
    background-image: url( 'http://lorempixel.com/200/200/cats/' );
    height: 200px;
    width: 200px;
}

    HTML:

    <div class="circle"><img src="http://lorempixel.com/200/200/cats/" /></div>
<div class="background-circle circle"></div>
    • 0