Hi,
Using current CSS and not CSS3, is there any way of specifying a raised type border style as I would like to somehow emphasize my menu. Basically after a border that has has a rounded edge, not rounded corners.
Thanks.
A:
Not without images. And CSS3 could be called current CSS, at least in implemenation with WebKit and to a lesser extent Gecko.
IE is playing slow paced catch up too :)
You could try and make a raised border by having a few child elements, all with a border and with a lighter shade of colour as you reach the outside border.
Also, you can cause 1px notched corners too with negative margins and CSS. It can also be argued you can make rounded borders without border-radius, but the HTML and CSS are quite horrendous (think of all the child elements with negative margins etc)
alex
2010-07-25 23:53:15
IE9 aims to fully support CSS2. They bragged about it on their website... On their website they also noted that their competitors are already working on CSS3... *Facepalm*... It's possible to use `border-radius` but you might as well just use tables... because that's at least much easier to work with...
ItzWarty
2010-07-25 23:56:26
@ItzWarty are you able to provide a small sample of how to achieve this using tables - thanks.
tonsils
2010-07-26 00:01:37
If you could provide an example picture, I might be able to put together an example.
ItzWarty
2010-07-26 00:03:52
+2
A:
With CSS 2.1 and prior you can use double, ridge, groove, inset, or outset. I've put together a simple demo file for you to play around with and test the various border styles available to you.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Border Styles</title>
<style type="text/css" media="screen">
body { background: #999; }
div { background: #eee; float: left; margin: 10px; padding: 10px; height: 100px; width: 100px; }
.double { border: 4px double #ccc; }
.ridge { border: 4px ridge #ccc; }
.groove { border: 4px groove #ccc; }
.inset { border: 4px inset #ccc; }
.outset { border: 4px outset #ccc; }
</style>
</head>
<body>
<div class="double">double</div>
<div class="ridge">ridge</div>
<div class="groove">groove</div>
<div class="inset">inset</div>
<div class="outset">outset</div>
</body>
</html>
You cannot make a rounded-corner without the CSS3 spec border-radius property. If you want to do this you should use a script like Modernizr to provide alternate support for browsers that cannot support CSS3.
Jim Jeffers
2010-07-26 00:15:04
`inset` and `outset` would do that, but that wouldn't be the *prettiest* result. :P+1 tho, for the simple way.
Tom
2010-07-26 00:28:05