Question: With the CSS `border-radius` property I can have a curvy, rounded border corner at the end.

```css
.boxLeft{
    border-right: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 10px 0;
}

.boxRight{
    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](https://i.stack.imgur.com/IzYHA.jpg)

Is that possible using CSS?

Answer: 
This is what you need, transparency and everything

```css
.left,
.right {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
  overflow: hidden;
}

.right::after,
.left::after {
  content: '';
  width: 200px;
  height: 200px;
  position: absolute;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.right::after {
  background: lightblue;
  left: -40px;
  top: -100px;
}

.left::after {
  background: lightpink;
  left: -60px;
  top: -100px;
}
```

```html
<div class="left"></div>
<div class="right"></div>
```
Ok, so I made a [JS library](https://github.com/MISoftware/Chamfer.js) to automate creating chamfered borders.
It has two methods for creating the chamfers:

**Method 1:** it creates a **chamfered** background using Canvas API and set it as the CSS `background-image` of the element.

**Method 2:** it appends 4 CSS based triangle DOM elements around the target, making the chamfer.

You will stick with method 1 when you can let the library set the `background-image`, and you will need method 2 when your target already has a background, like in <img>'s.

The usage is simple, just call `ChamferBg` for using method 1, or `ChamferEnvelop` to use method 2:

```
var el = document.getElementById('box');
ChamferBg(el, {
    size: 20,
    sw: 6,
    sc: '#447aec',
    fc: '#21ceff',
    tl: false,
    br: false,
    resize_observe: true
});

```

The options and their defaults are:

```
{
    size: 5,    // chamfer size
    sw: 1,      // stroke width
    sc: 'black',    // stroke color,
    fc: undefined,  // fill color
    fp: undefined,  // URL of an image to use as fill pattern

    tl: true,   // chamfer top-left corner?
    tr: true,   // chamfer top-right corner?
    bl: true,   // chamfer bottom-left corner?
    br: true,   // chamfer bottom-right corner?

    resize_observe: false
    // turn on resize_observe observer?
    // this will observer whenever the element
    // resizes and will refresh the background
}

```

You will need to set `resize_observe` to true if you use **method 1** and your element may change its size at runtime, because then it will need to recreate the chamfered background every time it resizes.