How to Round the Images in Asp.net

Question

3.00/5 (1 vote)

See more:

Hello Friends,
am new to programming and i did little projects on asp.net , C# and I have little knowledge in programmming.

So my requirement is I have Images with width and height 300px. and now i want to make it rounded corners. and display in my webpage.

Please help.

Thanks

Posted 1-Jan-13 19:41pm

HYD Webdeveloper

Add a Solution

Comments

Sergey Alexandrovich Kryukov 2-Jan-13 2:21am

Did you try to find anything? This is simple. OK, please see my answer for probably the simplest possible solution.
—SA

4 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-01-01T20:20:00

One really simple approach is this. Use PNG format. It supports transparency. Using some suitable image editor, draw some circular region (the selection, which is not part of the image), invert it to obtain selected complement of the round set, and erase excess parts of image with an eraser tool to 100% transparency. Save the image as PNG with transparency support and use it on your page.

Even if the background is non-uniform, your image will looks as perfectly rounded.

(For the editor, my first choice would be open-source GIMP:
http://en.wikipedia.org/wiki/GIMP[^],
http://www.gimp.org/[^].)

Good luck,

—SA

Ronjon1 · Answer 2 · 2013-01-01T20:29:00

Solution 3

you can try two things
1. Edit the image in photoshop with rounded corner save it into .png or .gif format and use it.
2. Use CSS3 Property

border-radius:25px;

Ref: http://www.w3schools.com/css3/css3_borders.asp[^]

Posted 1-Jan-13 20:29pm

Ronjon1

Zafar Sultan · Answer 3 · 2013-01-01T21:15:00

Solution 4

You can create a css class and use it with your image. Here is the css:

CSS

.roundedcorners
{
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;	
-moz-border-radius: 10px;
border-radius: 10px;
}

Apply this css to your image as:

HTML

<img src="yourimagesource" class="roundedcorners" />

But this approach does not work with IE

Posted 1-Jan-13 21:15pm

Zafar Sultan

Comments

HYD Webdeveloper 2-Jan-13 3:23am

Thanks, its working well in all browsers except IE.

Please can you help me, How to work with IE. because we use IE only.

Thanks

Zafar Sultan 2-Jan-13 3:37am

I am not sure but try this:
http://www.webdevtuts.net/css/adding-rounded-corners-to-internet-explorer-6-7-and-8-using-css3/

Christian Graus · Answer 4 · 2013-01-01T19:52:00

Solution 1

Learning to use google[^] is the most important skill you can have.

Posted 1-Jan-13 19:52pm

Christian Graus

How to Round the Images in Asp.net

4 solutions

Solution 2

Solution 3

Solution 4

Solution 1

Add your solution here

Preview 0

How to Round the Images in Asp.net

4 solutions

Solution 2

Solution 3

Solution 4

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us