Is it possible to use CSS to make a button with a rounded border, but without using images? i.e. the corners are not at 90 degreesu must use an image in order to do thisCSS3 has a property to do this but only mozilla renders it so the image is the only way for cross browser consistency.Just a silly note...
there is a way to create the illusion of small rounded corners using only CSS. but it only works in browsers that give top and bottom borders priority over left and right borders.
The only browser i have seen to do this yet is Safari.
There are serious restrictions to this method however.
1) Your color scheme must be workable.
2) My example uses a 9 cell table for a single button.
AND
3) It does not work in most browsers.
This trick is far more applicable to rounding off content areas on a page, also it cannot hurt much as browsers that do not display it correctly just display your normal 90deg. corners.
NOTE: when i say correctly i mean only correctly to make this trick work. I don't know what the CSS specs for borders are.
If you have Safari you can see the example here:
<!-- m --><a class="postlink" href="http://www.synergysolution.net/poc">http://www.synergysolution.net/poc</a><!-- m -->
-Johnok. that bothered me a little.. so i worked on it some more.
the fact of the matter is this:
the error was not in the way borders are drawn.
rather it was in the way safari draws exactly what you tell it to even when the cells have no content.
after adding one "." to the content of left and right most cells the concept does work.
Tested in the following browsers:
Mozilla
Camino
IE 5 Mac
IE 6 PC
Safari
Firefox
Opera
Hot Damn. Someone must have thought of this before now...
I'll work on a concept page.
-Johnhere is a small example:
<!-- m --><a class="postlink" href="http://www.synergysolution.net/poc/">http://www.synergysolution.net/poc/</a><!-- m -->
If anyone does not see it correctly let me know.
-JohnThat could easily be created using one superfluous DIV, a P, and two images. I'd give an example, but I'm not in a place where I have access to my normal coding environment.yup theres lots of ways to make it work.
i've been toying with it.
the tables really are useless.
but it's not a bad little trick i think.Originally posted by Paul Jr
That could easily be created using one superfluous DIV, a P, and two images. I'd give an example, but I'm not in a place where I have access to my normal coding environment.
Ha ha, I just noticed he said, “without imagesâ€Â. With CSS, there is a way, but it’s only supported by Mozilla, so…
there is a way to create the illusion of small rounded corners using only CSS. but it only works in browsers that give top and bottom borders priority over left and right borders.
The only browser i have seen to do this yet is Safari.
There are serious restrictions to this method however.
1) Your color scheme must be workable.
2) My example uses a 9 cell table for a single button.
AND
3) It does not work in most browsers.
This trick is far more applicable to rounding off content areas on a page, also it cannot hurt much as browsers that do not display it correctly just display your normal 90deg. corners.
NOTE: when i say correctly i mean only correctly to make this trick work. I don't know what the CSS specs for borders are.
If you have Safari you can see the example here:
<!-- m --><a class="postlink" href="http://www.synergysolution.net/poc">http://www.synergysolution.net/poc</a><!-- m -->
-Johnok. that bothered me a little.. so i worked on it some more.
the fact of the matter is this:
the error was not in the way borders are drawn.
rather it was in the way safari draws exactly what you tell it to even when the cells have no content.
after adding one "." to the content of left and right most cells the concept does work.
Tested in the following browsers:
Mozilla
Camino
IE 5 Mac
IE 6 PC
Safari
Firefox
Opera
Hot Damn. Someone must have thought of this before now...
I'll work on a concept page.
-Johnhere is a small example:
<!-- m --><a class="postlink" href="http://www.synergysolution.net/poc/">http://www.synergysolution.net/poc/</a><!-- m -->
If anyone does not see it correctly let me know.
-JohnThat could easily be created using one superfluous DIV, a P, and two images. I'd give an example, but I'm not in a place where I have access to my normal coding environment.yup theres lots of ways to make it work.
i've been toying with it.
the tables really are useless.
but it's not a bad little trick i think.Originally posted by Paul Jr
That could easily be created using one superfluous DIV, a P, and two images. I'd give an example, but I'm not in a place where I have access to my normal coding environment.
Ha ha, I just noticed he said, “without imagesâ€Â. With CSS, there is a way, but it’s only supported by Mozilla, so…