I want to create a HTML button with rounded corner and elliptical shape without image.
What is the way to do it?
This makes all sides rounded:
border-radius:40px;
This makes them elliptical:
border-radius:40px/24px;
Have a look here to see:
http://jsfiddle.net/xnTZq/
Or with some extra ugly fanciness:
http://jsfiddle.net/xnTZq/6/
-webkit-border-radius:3em / 1em;
-moz-border-radius:3em / 1em;
border-radius:3em / 1em;
#box-1 {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-border-radius:10px;
}
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
This is a very useful article to read if you need more help with this:
http://www.css3.info/preview/rounded-border/
Possibly use css3 border-radius and keep the height small to get an elliptical shape, good site to use for cross browser support (browsers that support css3 only of course unless you use css3 pie http://css3pie.com/ ) http://border-radius.com/
koolies
Related
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
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
OK, I have my site going pretty well here: http://www.marioplanet.com
But I've realized that if the end-user's monitor is big enough to display the animation on the sides of the pages (which mostly every desktop's monitor and some laptop's can) than I believe my main content would look better with a little red / black border, and some rounded corners, and perhaps even a dropshadow.
Now, I am looking for the easiest way to implement both the border and the rounded corners, and hopefully the dropshadow, but that's not as necessary, with the smallest amount of code.
If I can make it work with just CSS for most browsers except for IE and fallback to a jQuery / JS plugin for IE, that's great too. Or even leave it out of IE completely, but that's not too nice! :)
UPDATE:
OK, I can get it to apply to my header <div> as you can see live right now, but when I try to apply it to the overall wrappter <div>, I get nothing. It may be because I need to have the width and height properties specified in my CSS first.
Thanks!
UPDATE UPDATE:
I found the easiest way to do the borders was by using the following CSS3 selectors:
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
Which all work like a charm!!
CSS3 can do all that you need, and most browsers support it except IE8. (The next version of Internet Explorer will support these features though.)
Visit css3.info for more information.
UPDATE
I've started using http://css3please.com/ recently. It's equally great!
Check this out: http://css3pie.com/
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
It is easy to use and integrate, it allows you to use CSS3 features like border-radius, shadow, gradient backgrounds, etc... and best of all... it is compatible with IE!
I hope this helps!
jquery corner plugin is the best plugin to create a rounded corner, and Dropshadow is good one drop shadow effect. Its literally tow lines of code(ignoring the plugin code) :)
http://www.cssplay.co.uk/boxes/four_cornered.html
http://www.cssplay.co.uk/boxes/ has the rounded corners, dropshadow and more. 100% CSS with no use of JS, and works in IE.
I have boxes that have been designed like this
Basically I need to code them so that they can be any size height-wise and width-wise depending on the content inside. Plus the shadow effect needs to be transparent because the background color can change.
Best way to do this so it works in all browsers? (IE6+, FF, Opera, Safari, Chrome)
If you didn't have the requirement for IE6 you could use the very clean & light-weight jQuery Corners: http://jquery.malsup.com/corner/
To achieve this effect in IE6 you'll need to use the arcane method of a table lattice with tiny cells in each corner using semi-transparent corner images.
The best way is to design your website for modern browsers and allow things such as box shadow and border radius to degrade gracefully for older browsers and IE.
If you must have rounded corners in IE I'd use this method which I've found easy and lightweight...
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
I can't help with box shadows in IE, I'm afraid.
Actually, IE has a proprietary CSS extension that allows you to add shadows:
.shadowed {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); }
For rounded corners, you'll have to use images or JavaScript. I tried DD_Roundies and I'm quite satisfied with it (it has a few bugs though)
DD_Roundies Website
As for other browsers, you can use this:
/*************************************************/
/* The properties follow this format: */
/* property-name: x-offset y-offset blur #color; */
/*************************************************/
box-shadow: 0 0 4px #000; /* For Opera */
-moz-box-shadow: 0 0 4px #000; /* Firefox */
-webkit-box-shadow: 0 0 4px #000; /* WebKit browsers (Safari, Chrome, etc.) */
I would strongly recommend CSS3Pie (works in IE6-9).
Is there a way to change the orientation for a div using css.
ie I need to display a div in a slanting position.
Is there a way by which I can define the four corners of the div
(x1,y1) , (x2,y2) , (x3,y3) and (x4,y4)
Edit
Is there a way to do it using javascript or C#??
Is there a way to change the orientation of an image and not for a div??
This is not possible.
You will need to either use an image or VML/SVG
Please note that IE doesn't natively support SVG, and no other Browsers support VML, but there is an SVG to VML wrapper. Check google
Impossible with pure css, you'll need to use something else like svg, flash or silverlight. Svg will also let you embed arbitrary divs into it, so they will get rotated like you want, but svg isn't supported in IE yet and this particular feature was quite slow when i last tested it.
You could always use border slants instead?
Slants allow you to draw boxes on angles but they won't let you put text on an angle.
My need was to do in IE only and I did using matrix filter and setting the values for M11, M12, M21 and M22.
<style>
.SlantingDiv { padding: 2px; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=1.0,M12=0.4,M21=-0.2,M22=1.0); width: 60; height: 60; padding: 6px; border: #a9a9a9 1px solid }
</style>
<div class="SlantingDiv">
Slanting Text or Image
</div>