在網頁設計中，圓角是一種非常流行的設計元素。它可以讓頁面看起來更加柔和和友好，同時也可以減少頁面的僵硬感。那么在HTML中，如何輕松設置圓角呢？本文將為大家介紹兩種常用的方法。

一、使用CSS屬性

CSS屬性是設置圓角最常用的方法之一。我們可以使用border-radius屬性來設置圓角的大小。border-radius有四個值，分別表示左上角、右上角、右下角和左下角的圓角大小。可以設置為具體像素值或百分比。

例如，我們想要設置一個寬度為200px、高度為100px的div元素的四個角都為10px的圓角，可以使用以下代碼：

div {

width: 200px;

height: 100px;

border-radius: 10px;

如果想要只設置左上角和右下角為圓角，可以使用以下代碼：

div {

width: 200px;

height: 100px;

border-top-left-radius: 10px;-right-radius: 10px;

二、使用SVG

SVG是一種矢量圖形格式，可以用來創建各種形狀，包括圓角矩形。我們可以使用SVG來創建一個圓角矩形元素，然后將其插入到HTML中。

以下是一個使用SVG創建圓角矩形的示例代碼：

<svg width="200" height="100">

<rect x="0" y="0" width="200" height="100" rx="10" ry="10" />

</svg>

其中，rx和ry屬性分別表示圓角的橫向和縱向半徑。我們可以根據需要進行調整。

以上就是兩種常用的設置圓角的方法。使用CSS屬性可以輕松地設置圓角，而使用SVG則可以創建更具有自定義性的圓角矩形。在實際應用中，我們可以根據需要選擇合適的方法來設置圓角。