Jackson Jackson - 1 year ago 180
CSS Question

CSS: Bevel border with gradient?

I'm trying to create a perfect bevel border using CSS.

Basically, I need the border to be raised a bit and have a gradient colour.

The issue that I have is that I am using

as that is the closest i could find but the colours/gradient is not really good and the bevel style is not that good either.

there is a line on the corners with radius where the lighter colour meets the darker colour!

This is a working FIDDLE

Is there any better way to do this using CSS?

Any help would be appreciated.


This is the css code:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid #c2924e;
border-style: ridge;
border-bottom-left-radius: 3em;
border-top-right-radius: 3em;

Answer Source

If you want a gradient border, you can accomplish a cleaner border effect using an inner div and gradient backgrounds on the outer div. That should give you the desired effect. Keep in mind with that radius you have going there, the inner radius will need to decrease slightly to keep the width of the "border" consistent across it. You may need to play with this slightly across browsers. Tested on Chrome & FF / Mac.


.ttle {
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#c2924e, #7c5b2d);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#c2924e, #7c5b2d);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#c2924e, #7c5b2d);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#c2924e, #7c5b2d);
  /* Standard syntax */
  width: 90%;
  height: auto;
  padding: 5px;
  border-bottom-left-radius: 3em;
  border-top-right-radius: 3em;
  background-color: #000;
.inner {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: none;
  width: 100%;
  height: auto;
  padding: 10px;
  min-height: 150px;
  border-bottom-left-radius: 2.8em;
  border-top-right-radius: 2.8em;
  background-color: #000;
<div class="ttle">
  <div class="inner">


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download