Is it possible to make the corners of a thumbnail rounded using css?
EDIT - The html starting point is:
<img src='test.jpg' width='50' height='50' />
It has no css on it at the start and I be wanting to round the corners a little...
EDIT+NOTE: The moz-border method doesn't really round the corners of the image itself, which is what I was hoping for, instead it rounds the corners of a boarder square around the images. Looks ok...
To expand #Clayton's answer:
You can do it natively in any modern browser:
-moz-border-radius: 5px;
border-radius: 5px;
The vendor prefix -moz will likely disappear soon.
See this jsfiddle to see it in action. Notice, also, that the rounding is applied directly to the <img> element.
This works in all current versions of all 5 major browsers.
To phrase this better, the following two lines will achieve the desired effect in Firefox, Chrome, and IE9.
-moz-border-radius: 5px;
border-radius: 5px;
More information can be found here:
http://www.css3.info/preview/rounded-border/
To accomplish this in IE8, you will need to use javascript. This jquery plugin would do the trick: http://jquery.malsup.com/corner/
You can use border-radius. It doesn't work on <img> elements, but you could apply border-radius to a <div> with the image as the background-image.
This code will round all four corners and it also supports Opera.
img { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
Clayton's solution only rounds the top two corners, which may or may not be what you're looking for.
Yes using the nifty-corners technique. Nifty corners is an old way to produce rounded edges. It will function in all browsers (old and new browsers)
http://www.html.it/articoli/nifty/index.html
Related
I'm thinking of creating a custom made rounded corners block using only divs, and I was curious to know what you guys think, if that's a good enough approach, or is there an easier way to get a cross browser support (While also supporting older browsers such as IE6)
I'll write a little simple explanation code for you guys to understand easily:
<div class="Block" style="position:relative">
<div>
Content will go here or something
</div>
<div name="TopLeft" style="position:absolute;top:0;left:0;"></div>
<div name="TopRight" style="position:absolute;top:0;right:0;"></div>
<div name="BottomLeft" style="position:absolute;bottom:0;left:0;"></div>
<div name="BottomRight" style="position:absolute;bottom:0;right:0;"></div>
</div>
In the real code, I'll give each one of them a background, and of course put it in a css file instead of writing it inline like that.
Use CSS3Pie.
This is a Javascript hack for IE that implements the border-radius CSS in old versions of IE.
If you need rounded corners in IE6-9 browsers you only need to use CSS3 border-radius and one PIE.htc file
Progressive Internet Explorer
div{ border-radius: 6px; -moz-border-radius: 6px; behavior: url(PIE.htc); }
This works best in all IE browsers
Yes, that will work fine.
You can also add the elements using script, that will make the markup cleaner. I use that approach here: bytbil.com
Doubt it will work in IE6, but you can use the following:
-moz-border-radius: 15px;
border-radius: 15px;
Put that in your CSS for a DIV and it will support most browsers, but again, not sure about IE6... It does definitely work on IE9, Safari (5+), FireFox(1.0+), Chrome(5+) and Opera(10.5+)...
I guess this would work, and it's as good as anything to support IE6.
Any solution that covers IE6 is bound to be an awful hack. I think it's really worth it to wonder if you really need it. I would prefer just using css rounded corners and let the chips fall where they may.
i know border-radius property wont support in IE7.
Is there any css tricks to do border-radius in IE7 browsers.
You can use CSS3 PIE to get this working.
To get it add the pie.htc file to the ROOT of your site. In your CSS file where you want to use border-radius add the following code:
behavior: url(path/to/PIE.htc);
In normal CSS the url is relative to the CSS file. For htc files it is relative to the ROOT of your website. This is important as it won't work otherwise. Blame Microsoft.
NOTE:
If it's not working still then add this to your selectors:
position: relative;
z-index: 0;
There are plenty of "tricks" to get rounded corners in browsers that do not support the "border-radius" CSS property. Just do a google search for "rounded corners css". This one seems promising for instance.
Currently, IE 9 and 10 are the only versions of IE that support border-radius. IE 8 and below do not support border-radius.
Check this http://css3pie.com/
use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....
use that code for border-radius working well ....
**
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
**
and also see for border-radius http://css3pie.com/
given in detail in document
I have a div with border radius, I write the CSS code for all the browsers:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
but in IE it doesn't work!
What should I do?
Border radius does not work in IE until version 9.
See: Support for "border-radius" in IE
There are some suggestions on that answer as well as on Google for alternatives.
You may be required to use images for your rounded corners. You may be able to use a JavaScript based re-creation of rounded corners.
I think using PIE.htc for all css3 styles will be better. I have used it in many of my projects and works fine in IE7/8/9.
Here is the link. http://css3pie.com/ This will provide you various demos for that and it is really helpful.
Thanks.
If you're using IE8 or older, you have to do that with images or some sort of javascript plugin. If you're using IE9 or newer, then that code works perfectly fine.
Here are some jQuery plugins that could solve your problem: http://plugins.jquery.com/plugin-tags/border-radius
Nifty Corners works as well in IE8.
Here is an example: http://jsfiddle.net/jCm7T/1/
Can anyone tell me the the latest solution for implementing rounded corners with DIV tags? Is the PNG corner images still the best cross-browser solution? Is Jquery the best approach? How is everyone approaching the rounded corners problem?
Many thanks.
Erik
For most browsers, CSS3 provides a way.
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
No need for images anymore.
If you must support IE8 and earlier, here are a number of ways to accomplish rounded corners.
According to that Microsoft page:
Windows Internet Explorer 9
supports adding rounded corners to
elements using the border-radius
properties.
It also suggests these pages which claim to be updated:
25 Rounded Corners Techniques with CSS
CSS Rounded Corners 'Roundup'
Rounded Corners
Without having read all of these many approaches, I'd hazard a guess that there is no universal best solution at the moment. Until we can assume that pretty much all of our visitors have CSS3-compliant browsers, you have to make some choices.
The optimal solution at the moment is to use:
selector {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
That will work in "all" modern browsers including IE9, see: http://caniuse.com/#search=border-radius
By far the best workaround for older versions of IE is to use CSS3 PIE:
PIE makes Internet Explorer 6-8
capable of rendering several of the
most useful CSS3 decoration features.
PIE currently has full or partial
support for the following CSS3
features:
• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image
As you can see, you also get support for more CSS3 eye candy
What is the difference and the best way to create them right now ?
CSS3, definitely. It's faster and cleaner and is supported on all major browsers. IE needs (suprise, suprise) a workaround though:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(border-radius.htc);
In simple words:
The rounded corners created with images should and work across all browsers.
And those created with CSS3 work in modern browsers but not the IE < 9.
What is the difference and the best
way to create them right now ?
You should use CSS3's borer-radius propery along with vendor-specific prefixes for the modern browsers. To get rounded corners working in IE as well, you can use:
CSS3Pie
PIE makes Internet Explorer 6-8
capable of rendering several of the
most useful CSS3 decoration features.
Here is an example of cross-browser rounded corners:
#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}
You can use the jQuery Plugin CurvyCorners
if you do not want to use css3
the jQuery plugin lc_roundz http://coffeelog.itsatony.com/?p=86 will do the job dynamically - even if you want the corners to be transparent (e.g. for use on complex backgrounds, ...).
$("#image").lc_roundz({
radius: 20, // corner-radius
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original
newid: "%oid_after_lc_roundz", // the new ID for the canvas object. %oid will be replaced with the id of the original object
width: -1, // -1 uses the original image's width
height: -1, // -1 uses the original image's width
replace: false, // boolean to decide whether the original should be removed from the DOM
corner_color: [0,0,0,0] // this means TRANSPARENT ... R,G,B,alpha [0-255] each
});