自從border-radius成為標準後，開發者們終於不必再用圖片製作圓角的圖案。想要一個正圓形，只要將border-radius設為正方形邊寬的一半就可以了。

.circle {
	background: #df343d;
	width: 200px;
	height: 200px;
	border-radius: 100px;
}

然而，網頁上的視覺元素常需要依內容多寡或是瀏覽器的大小做適應性的調整，上面的圓形一旦當內容比較多造成長寬不相等，顯示的形狀就不是一個好看的楕圓形，更何況常常我們不會事先知道特定的尺寸，沒辦法設 100, 200 這種確定的值。

那麼我們還可以用border-radius做一個橢圓形，甚至能讓它依情況自動調整嗎？

一個較少人知道的事實是，border-radius接受不同的水平和垂直的半徑值，只要用/將二個長度隔開，就能在角落製造橢圓的效果。

所以只要拿長方形的寬高的一半，就能畫出標準的橢圓形。

.ellipses {
	background: #df343d;
	width: 200px;
	height: 150px;
	border-radius: 100px / 75px;
}

上面的範例在尺寸改變時，border-radius也需要同時改變，好在border-radius除了長度單位外，也認得百分比，所以只要將樣式修改成：

.ellipses {
	background: #df343d;
	width: 200px;
	height: 150px;
	border-radius: 50% / 50%;
}

不管寬高如何變，形狀都會是橢圓形。而且既然斜線前後的值是一樣的，可以簡寫成border-radius: 50%。

CodePen