1. Thuộc tính border-radius trong CSS3 cho phép tạo góc tròn, vì vậy nếu bạn tạo một hình vuông có kích thước là 100x100 và có border-radius là 100 thì hình vuông đó sẽ trở thành hình tròn.

2. Tạo file circle.html với nội dung sau:

view plaincopy to clipboardprint?

<style type="text/css"></style>

.circle {

width: 100px;

height: 100px;

background: #C30;

text-align: center;

padding: 50px;

color: #fff;

-moz-border-radius: 100px;

-webkit-border-radius: 100px;

border-radius: 100px;

}

Thuộc tính border-radius với các tiền tố(prefix) khác nhau sẽ được dùng cho các trình duyệt khác nhau: Firefox (moz), Safari, Chrome (wekit), Konqueror (khtml). Riêng trình duyệt Opera dùng phiên bản không có tiền tố.

3. Chạy file circle.html để xem kết quả.