How do I bevel the corners of an element? - css

Question

I want the corners of an element to essentially be cut off. This element has a solid background whereas it's parent element has an image as it's background. The height of this element is unknown. CSS's border-radius property doesn't help me since it rounds it. I found a jQuery plugin that help but it doesn't account for the background image.

Answer 1

What you want is this: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
All in CSS.
div {
background: #c00; /* fallback */
background:
-moz-linear-gradient(45deg, transparent 10px, #c00 10px),
-moz-linear-gradient(135deg, transparent 10px, #c00 10px),
-moz-linear-gradient(225deg, transparent 10px, #c00 10px),
-moz-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #c00 10px),
-o-linear-gradient(135deg, transparent 10px, #c00 10px),
-o-linear-gradient(225deg, transparent 10px, #c00 10px),
-o-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-webkit-linear-gradient(45deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}
div.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}
div, div.round {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
/* Ignore the CSS from this point, it's just to make the demo more presentable */
body {
background: #444 url('http://leaverou.me/ft2010/img/darker_wood.jpg') bottom;
font-family: sans-serif;
}
div {
width: 500px;
margin:15px auto;
padding:13px 15px;
color: white;
line-height:1.5;
}
p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0}

Answer 2

-= 2017 =-
Here is the updated and upgraded version which works across all evergreen browsers.
https://codepen.io/aternus/pen/mqqXdK
It even allows you to specify a custom background color/image with ease. Just add another background layer (as the last).
/* Demo Styling */
body {
background: #333333;
padding: 2rem;
}
/* CSS */
.container {
padding: 1rem 2rem;
color: #ffffff;
background-color: transparent;
background-image: linear-gradient(180deg, #ffdc00, #ffdc00)
,linear-gradient(225deg, #ffdc00, #ffdc00)
,linear-gradient(0deg, #ffdc00, #ffdc00)
,linear-gradient(90deg, #ffdc00, #ffdc00)
,linear-gradient(135deg, transparent 9px, #ffdc00 10px, #ffdc00 12px, transparent 12px)
;
background-position: top right
,top right
,bottom left
,bottom left
,top left
;
background-size: calc(100% - 15px) 2px
,2px 100%
,100% 2px
,2px calc(100% - 15px)
,15px 15px
;
background-repeat: no-repeat;
}
<div class="container">
Lorem that ipsum, dolor that amet
</div>

Answer 3

Not exactly sure of the question but perhaps you are referring to border-style?
border-style: outset produces beveled edges.
More info: http://www.w3schools.com/css/css_border.asp