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: 
I first tested @thordarson solution with `position: 'absolute'`.

```
position: 'absolute',
top: '2.9rem',
left: '2.6rem',
borderLeft: '1rem solid #6CAEC6',
borderBottom: '0.7rem solid white',

```

This worked fine on most devices as shown in the first picture but when used on iPhones or tablets weird lines started showing up:

[![enter image description here](https://i.stack.imgur.com/7pYEv.png)](https://i.stack.imgur.com/7pYEv.png)

[![enter image description here](https://i.stack.imgur.com/Jk6zF.png)](https://i.stack.imgur.com/Jk6zF.png)

[![enter image description here](https://i.stack.imgur.com/uEw9l.png)](https://i.stack.imgur.com/uEw9l.png)

As @Collins answer I then started using `clip-path: polygon` but I had quite a hard time getting the correct shapes. I then found a site that really helped me:

<https://bennettfeely.com/clippy/>

They offer ready shapes that can then be dragged to a desired shape.

[![enter image description here](https://i.stack.imgur.com/x6gJQ.png)](https://i.stack.imgur.com/x6gJQ.png)

For the corner that I needed I could then copy the correct values from the website.

[![enter image description here](https://i.stack.imgur.com/IOU4U.png)](https://i.stack.imgur.com/IOU4U.png)

A requirement for us was a 35° angle and to get that right I used the site: 

<https://www.ginifab.com/feeds/angle_measurement/>

[![enter image description here](https://i.stack.imgur.com/x99aw.png)](https://i.stack.imgur.com/x99aw.png)

I have no affiliation with any of the sites, they just really helped me get what I wanted. With `clip-path: polygon` and `-webkit-clip-path: polygon` it worked on all devices and browsers that we had as a requirement. 

Compatibility check:

<https://caniuse.com/#feat=css-clip-path>
A good The best way to archive this: [border-images](http://www.css3.info/preview/border-image/). In combination with `.svg` a good solution...