HTML/CSS | Thuộc tính border-radius

Học HTML, CSS từ Zero Tới Hero

• Tính chất
• Cú pháp sử dụng
• Ứng dụng

Tính chất

Thuộc tính border-radius dùng để bo góc các phần tử, tránh các góc nhọn và cứng, tạo ra hiệu ứng mềm mại và thân thiện hơn cho giao diện web.

Thuộc tính này được tính theo góc, bao gồm 4 góc. Nhắc tới đây có thể bạn sẽ liên tưởng tới top, right, buttom, left như padding hoặc border. Tuy nhiên, border-radius lại không tính theo hướng như padding và border mà sẽ tính theo góc, bao gồm:

• top-left: góc trên bên trái
• top-right: góc trên bên phải
• bottom-left: góc dưới bên trái
• bottom-right: góc dưới bên phải

Khác với padding và border, thuộc tính border-radius không nằm trong Box Model và không làm tăng kích thước phần tử.

Cú pháp sử dụng

Cú pháp:

selector {
    border-radius: value;
}

Thuộc tính border-radius là cú pháp shorthand của các thuộc tính:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Tuy vào từng thiết kế, bạn có thể chỉ định cho từng góc riêng lẻ bằng việc sử dụng các thuộc tính vừa được đề cập trên hoặc dùng cú pháp shorthand kết hợp với các giá trị:

Giá trị	Mô tả
border-radius: 10px;	Cả 4 góc đều được bo 10px.
border-radius: 10px 20px;	10px tương ứng với góc trên bên trái và dưới bên phải, 20px tương ứng với góc trên bên phải và góc dưới bên trái.
border-radius: 10px 20px 30px;	10px tương ứng với góc trên bên trái, 20px tương ứng với góc trên bên phải và dưới bên trái, 30px tương ứng với góc dưới bên phải.
border-radius: 10px 20px 30px 40px;	Các giá trị lần lượt bắt đầu từ góc trên bên trái theo chiều kim đồng hồ.

Ứng dụng

Các nhà phát triển thường dùng border-radius để bo các góc ở hình ảnh, nút bấm, v.v giúp các góc trở nên mềm mại và đẹp hơn. Ngoài ra, có thể dùng border-radius để tạo nên một hình tròn:

<style>
.box {
    width: 200px;
    height: 200px;
    background-color: violet;
    border-radius: 50%;
}
</style>

<div class="box"></div> 

Hay tạo nên sự mềm mại hơn cho các nút bấm:

<style>
.btn {
  display: inline-block;
  padding: 8px 20px;
  margin-top: 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  background-color: #5ebbff;
}
</style>

<a class="btn">Đăng ký</a> 

Đăng ký

Tóm lại, có rất nhiều trường hợp bạn có thể ứng dụng được border-radius vào thực tế, chỉ cần nắm rõ công dụng và cú pháp, bạn có thể linh động sáng tạo với trang web của bạn.

Tóm tắt

• Thuộc tính border-radius dùng để bo góc các phần tử.
• Thuộc tính border-radius được tính theo các góc: top-left, top-right, bottom-left, bottom-right.
• Border-radius không nằm trong Box Model và không làm tăng kích thước phần tử.
• Có thể có từ 1 tới 4 giá trị cùng lúc.