Home/ Questions/Q 938139
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T21:35:36+00:00

Using current CSS and not CSS3, is there any way of specifying a raised

  • 0

Using current CSS and not CSS3, is there any way of specifying a raised type border style? I would like to somehow emphasize my menu. Basically I am after a border that has has a rounded edge, not rounded corners.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0