• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How do I create a rounded image?

Malcolm

Administrator
Administrator
Staff Team
Code Plus
Company Plus
Hello Coders!

Can someone please help me on how to create an image and have it rounded?

Would using border-radius in CSS work?
 
Yes, it is possible to make Images round. To do that, you'd need to use Border-Radius:

Example:
Border-Radius: 50px;

Ghost's Answer(Figured I'd include it as it's also correct):
Spot on answer!
You can also do this:
border-radius:10px 25px 5px 15px;

That will cause every corner to have a different radius, in the order of top left, top right, bottom right, bottom left. I think that's the order at least lol :)
 
Last edited by a moderator:
Yes, it is possible to make Images round. To do that, you'd need to use Border-Radius:

Example:
Border-Radius: 50px;
Spot on answer!
You can also do this:
border-radius:10px 25px 5px 15px;

That will cause every corner to have a different radius, in the order of top left, top right, bottom right, bottom left. I think that's the order at least lol :)
 
The CSS property border-radius adds rounded corners on images.

Rounded Corners on Images
  1. Add the image to your page.
  2. Add a class to your image
  3. Style your corners.
  4. When you have the corners looking the way you want, add your styles to your site's CSS.
 
Great! Thanks for sharing.

Why is this the better way?
Because you want to support older browsers, not everyone uses the latest.

 
Because you want to support older browsers, not everyone uses the latest.

Thanks for sharing!
 

New Threads

Latest posts

Buy us a coffee!

300x250
Top Bottom