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: 
**CSS3 Gradients** can do the trick:

Try this, Here's a [Fiddle](http://jsfiddle.net/S2nqK/3/).

```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 {
  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 */

div {
  float: left;
  width: 50px;
  margin: 15px auto;
  padding: 15px;
  color: white;
  line-height: 1.5;
}
```

```html
<div>Div 1</div>
<div>Div 2</div>
```
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>