雖然border-image的做法很簡潔也很 DRY，仍然有它的限制，比如說我們還是需要有個純色的背景。

還記得在鑽石形圖片中用過的clip-path嗎？CSS clipping paths 驚人的功能是我們可以混合使用絕對長度和百分比，這給我們很大的彈性。

例如要製作20px邊長大小的截角，它的樣式就像這樣：

.box {
	background: grey;
	clip-path: polygon(
		20px 0, calc(100% - 20px) 0, 100% 20px, 
		100% calc(100% - 20px), calc(100% - 20px) 100%, 
		20px 100%, 0 calc(100% - 20px), 0 20px
	);
}

雖然一行 CSS 就解決，但是要改截角大小的話卻要改動到8個地方，在維護上是挺不方便。

這個方法的好處是可以用任何東西當背景，尤其是圖片，之前示範的方法沒有一個能做到這樣的效果。而且因為 clip-path可以被 CSS Animations 操作，所以不只能對截角大小加上動畫，連形狀也能加上動畫。

除了維護麻煩以及有限的瀏覽器支援外（IE 和 Edge 和 Safari 不支援 clip-path），它的缺點是如果沒有足夠的padding元素，裡面的文字有可能被切掉。前面示範的 gradient 方法文字則會溢出角落，因為它們只是背景無法限制內容區域。border-image的方法如同普通的border一樣會讓文字按照它 text wrap 的設定呈現。

CodePen

想不到看起來簡單的截角實現起來挺複雜的，在 CSS Backgrounds & Borders Level 4 裡有了新的規範讓我們不用再這麼麻煩，corner-shape能指定角落的形狀，配合border-radius指定其大小。

.box {
	border-radius: 15px;
	corner-shape: bevel;
}