Can I use border-radious on image CSS?

Question

Can I use display:block; and border-radius on an image in CSS? Is this contrary to CSS principles?

Possible duplicate of [How to get perfect border radius on images in all browsers?](http://stackoverflow.com/questions/8444645/how-to-get-perfect-border-radius-on-images-in-all-browsers) — jrn, Feb 15 '17 at 21:03

Christoph Fricke · Accepted Answer · 2017-02-16T14:23:15.270

1

Yes you can. :)

You can easily give the image a border-radius of whatever number you like.
50% or more would be and round image. You can also use px.

For example:

You have an image somewhere in your html document:

<img id="image" src="Your source">

In your css file you can simply write:

#image {
    border-radius: 50px; <-- example number
}

edited Feb 16 '17 at 14:23

answered Feb 15 '17 at 21:11

Christoph Fricke

117
2
9

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Check this answer by yusuf:

.img-border{
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border:3px solid red;
}

edited May 23 '17 at 12:16

Community

1
1

answered Feb 15 '17 at 21:03

jrn

2,640
4
29
51

score 0 · Answer 3 · answered Feb 15 '17 at 21:05

Yes, img tags are inline-block elements, but you can change its width and height like block elements.

Like this for example:

    .img-circular{
    width: 200px;
    height: 200px;
    background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
    background-size: cover;
    display: block;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    }

Can I use border-radious on image CSS?

3 Answers3