Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out. Any way to fix this without setting the image as a background image or processing it before I put it on my site? ...
This works div { -moz-border-radius: 5px 5px 0 0; border:1px solid #000; margin:30px; } This does not work table { -moz-border-radius: 5px 5px 0 0; border:1px solid #000; margin:30px; } Does anyone know how to use -moz and -webkit to work on tables? ...
I am trying to detect a mouseover event on a circle. I define the circle div like this: .circle { width: 80px; height: 80px; -moz-border-radius: 40px; -webkit-border-radius: 40px; background-color: #33f; } Then I detect the mousover using jQuery like this: $('.circle').mouseover(function() { $(this).css({backgroundColor:...
Using the code below, both Chrome and Opera (latest versions supporting border-radius) on Mac show a small blue area outside the rounded corners (which seems to a part of the defined background-image). Why? <!doctype html> <head> <title>Testcase for rounded corners on submit button with bg-image</title> <style type="text/css"> ...
I try to get a thin border with round corners for the tip in qtip, using: border: {width: 1, radius: 7, color: "#B8E25E"} (Like explained here: http://craigsworks.com/projects/qtip/docs/tutorials#borders) But the border is then getting quite thick, like 7 or something, is there a way to get a thin border with round corners? ...
Hello all, After my 1st question with relation to CSS3 gradients in which I was recreating an 'inner glow' I've now got to the point where I'm not so happy with the way in which webkit renders the effect. Basically, if you give an element a background colour and apply a border radius to it, webkit lets the background colour "bleed" out...
I'm working on a website that has a lot of transparency involved, and I thought I would try to build it entirely in RGBA and then do fallbacks for IE. I need a "facebox" style border effect, where the outer border is rounded and is less opaque than the background of the box it surrounds. The last example from http://24ways.org/2009/work...
I'm working on HTML for a small web application; the design calls for a content area with rounded corners and a drop shadow. I've been able to produce this with CSS3, and it works flawlessly on Firefox and Chrome: However, Internet Explorer 7 and 8 (not supporting CSS3) is a different story: Is there an easy, lightweight JavaScript...
Hello, I've been experimenting with CSS3 and found something strange. Heres's the part of DIV style: border:#446429 solid 1px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; -moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset; ...
i see that chrome puts a thicker border on :focus. but it kind of look off in my case where i use border-radius also. is there anyway to remove that? ...
in the following code <html> <body> <div style="height:400px; width:400px; -moz-border-radius:100px; -webkit-border-radius:100px; border:3px solid #500; background-color:#a00; overflow:hidden;"> Why is this getting cut at the beginning??? </div> </body> </html> Why isn't the browser wrapping the text around the rounded corners. ...
Here is a reference HTML document: <!DOCTYPE html> <html> <head> <style> body { background-color: #000; } input { -webkit-border-radius: 20px; } </style> </head> <body> <input type="text" value="text" /> </body> </html> The border-radius renders fine on Safari/WebKit-based desktop browsers, but on the "...
I want to create an input fields with rounded corners. HTML: <div id="RightColumn"> <input type="text" class="inputForm" /> </div> CSS: .inputForm { -moz-border-radius:10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ -khtml-border-radius: 10px; /* KHTML */ border-radius: 10px; /* CSS3 */ behavior:url("borde...
I am trying to get the border radius property to work properly on a fieldset in Opera 10.6, but it does not appear to be working correctly. Here is the html: <form method="post" action="character.php" class="form"> <fieldset> <legend>Insert</legend> <label for="txtCharacter">Character</label> <input type="...
I was wondering if there was a tool that can "pre-process" CSS and automatically add experimental properties so they'll look the same on browsers that support it. For example, instead of writing: .class { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px } I could just write: .class { border-radi...
In Safari & Webkit, using only border-radius seems to work without adding the prefix -webkit- to it. Is it okay to leave -webkit- prefix for border-radius? ...
Everything works fine in webkit browsers. But when i'm trying to use border-radius with input[type="url"] it doesn't work. Not even just using input. Nothing still works. Css section.crypter input { border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 5px; } HTML <form> <input type="ur...
I'm trying to optimize my site for speed. I used images for the rounded corners before but now I've changed them with border-radius and -moz-border-radius css rules. Which way is the best for speed? I used to think that css rules are faster but I've seen a lot of sites talking about css sprites and I'm a bit confused now. Oh and I don't ...
including the 'border-radius: num1 / num2;' property gives a '/ is an incorrect operator' error. any way to get this to validate? ...
Hi, I want to set border for a div, Using: -webkit-border-radius working fine on Chrome but it is not working for Internet explorer, triple versions: ie 6, 7 and 8 :D Is there any other attribute like -webkit-border-radius specifying for IE? Thanks in advance. ...