Để bo góc hoặc bo tròn một đối tượng trong CSS, bạn hãy xài thuộc tính border-radius và gán giá trị là px hoặc %.
– Border: Có nghĩa là viền.
– Radius: Có nghĩa là bán kính.
[css] .img{border-radius: 4px;
}
.img:hover{
border-radius: 50%;
}
[/css]
Trong ví dụ trên:
– Mình đặt border-rdius ở thẻ img (hình ảnh) là 4px để cho nó bo góc một chút.
– Mình đặt tiếp border-radius ở thẻ img:hover (khi di chuột lên hình) là 50% để nó trở thành hình tròn.
Vậy là chúng ta sẽ được một hình bo tròn nhẹ ở góc và khi di chuột lên nó sẽ trở thành hình tròn.