Thuộc tính border-radius - Bo góc, bo tròn trong CSS

Để 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.

.img{
    border-radius: 4px;
}

.img:hover{
    border-radius: 50%;
}

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.

Tôi là nhà sáng lập Kênh Tin Học - Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.

Thuộc tính border-radius – Bo góc, bo tròn trong CSS