CSS中的border-radius是一個非常實用的屬性，它可以用來控制元素的圓角效果。通過設置border-radius的值，我們可以使元素的邊框呈現出各種各樣的圓角形狀，從而實現不同的UI設計效果。

.box {
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
 }

在這個例子中，我們給一個名為.box的div元素設置了border-radius屬性為10px，這意味著這個元素的四個角都將呈現出10px的圓角效果。

當然，我們也可以對每個角單獨設置不同的值：

.box {
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 15px;
 }

這個例子中，我們分別對.box元素的四個角設置了不同的border-radius值，可以看到，這個元素左上角的圓角半徑為20px，右上角為10px，右下角為5px，左下角為15px。

除了設置具體的像素值，我們也可以使用百分比來控制border-radius屬性：

.box {
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
 }

這個例子中，我們將box元素的border-radius屬性設置為50%。這意味著，這個元素的四個角都將呈現出一個完美的半圓形狀。

總之，CSS的border-radius屬性非常實用，可以幫助我們實現各種各樣的UI設計效果。通過靈活地設置border-radius的值，我們可以創造出更加復雜、精美的UI設計作品。