Click here to Skip to main content
11,717,126 members (80,086 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET CSS
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
Comments
Sergey Alexandrovich Kryukov at 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
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Learning to use google[^] is the most important skill you can have.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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
  Permalink  
v3
Rate this: bad
good
Please Sign up or sign in to vote.

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[^]
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

You can create a css class and use it with your image. Here is the css:
.roundedcorners
{
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;	
-moz-border-radius: 10px;
border-radius: 10px;
}
Apply this css to your image as:
<img src="yourimagesource" class="roundedcorners" />
But this approach does not work with IE
  Permalink  
Comments
HYD Webdeveloper at 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 at 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/

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 449
1 OriginalGriff 265
2 F-ES Sitecore 210
3 Maciej Los 135
4 Jochen Arndt 120
0 Sergey Alexandrovich Kryukov 1,144
1 Maciej Los 509
2 OriginalGriff 505
3 Richard MacCutchan 440
4 CHill60 415


Advertise | Privacy | Mobile
Web03 | 2.8.150901.1 | Last Updated 2 Jan 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100