Mayeenul Islam Mayeenul Islam -4 years ago 103
CSS Question

How to achieve chamfered CSS Border Corners rather than rounded corners?

With the CSS

property I can have a curvy, rounded border corner at the end.

border-right: 1px dashed #333;
border-bottom: 1px dashed #333;
border-radius: 0 0 10px 0;

border-left: 1px dashed #333;
border-bottom: 1px dashed #333;
border-radius: 0 0 0 10px;

But I want a border corner like the image below. If I have two boxes (Yellow & Pink) meeting each other and I want a harsh corner at the bottom meeting point (dotted corner), what should I do?

enter image description here

Is that possible using CSS?

Answer Source

Here's a way, although it does have some shortcomings, like no borders and it isn't transparent:


<div class="left"></div>
<div class="right"></div>


.right {
    width: 100px;
    height: 100px;
    float: left;
    position: relative;

.left {
    background: lightpink;
.right {
    background: lightblue;

.left::after {
    width: 0px;
    height: 0px;
    background: #fff;
    content: '';
    position: absolute;
    bottom: 0;

.right::after {
    left: 0;
    border-top: 10px solid lightblue;
    border-right: 10px solid lightblue;
    border-left: 10px solid white;
    border-bottom: 10px solid white;

.left::after {
    right: 0;
    border-top: 10px solid lightpink;
    border-right: 10px solid white;
    border-left: 10px solid lightpink;
    border-bottom: 10px solid white;


enter image description here

Here's a fiddle.

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