công ty thiết kế website tốt nhất

Đại bộ phận các CSS styler chắc ai cũng ít lần biết và sử dụng đến thuộc tính border-radius, thuộc tính làm cho 4 cạnh của element trở nên cong và tròn lại thay vì gốc vuông vức mà ta vẫn thường thấy. Không còn phải sử dụng các thủ thuật để làm cong các cạnh của element như lúc trước, nay mọi chuyển đã đơn giản hơn bao giờ hết với thuộc tính border-radius của CSS3.

Hình trên minh họa các hình dạng tương ứng của các element khi áp dụng thuộc tính border radius. Trên là nói lại sơ sơ về border-radius. Bây giờ ta sẽ làm hình tròn, như ta thấy ở trên, giá trị cấp cho border-radius sẽ làm tròn element lại ở các góc. Nếu ta cho border-radius có giá trị bằng nữa kích thước của đối tượng:

div.example {
background: #69F;
width: 10em;
height: 10em;
-moz-border-radius: 5em;
-webkit-border-radius: 5em;
border-radius: 5em;
}

.example div {
padding:30px;
}

Để cho đối tượng được tròn thì bề rộng và chiều cao phải bằng nhau, để khi “làm cong” thì nó mới đều nhau.  Sử dụng style CSS trên. Với đoạn HTML như sau:

<div class="example">
<div> Vòng tròn làm bằng CSS</div>
</div>

Và kết quả:

Một ví dụ khác, mình dùng thêm background-image:

.. và một ví dụ khác dùng box-shadow:

Trình duyệt bạn đang dùng phải hỗ trợ css3 để thấy kết quả, nếu không bạn chỉ thấy một hình vuông màu lam.
Trình duyệt test thành công: IE thì phải bản 9 trở lên còn Firefox, Opera, Safari và Chorme đều OK.