Thuộc tính border-radius trong CSS3


Thuộc tính border-radius trong CSS3 cho phép các web developer dễ dàng làm các góc bo tròn cho yếu tố thiết kế mà không cần phải sử dụng đến hình ảnh hoặc sử dụng nhiều thẻ div. Kể từ lần đầu tiên được công bố vào năm 2005, thuộc tính border-radius này đã được nhiều trình duyệt phổ biến hỗ trợ và tương đối dễ dàng sử dụng đối với các web developer.

Dưới đây là một số ví dụ đơn giản:

#round-1 {
  border-radius: 10px;
  background: #F17288;
}
#round-2 {
  border-radius: 10px;
  border: 3px solid #F17288;
}

Cho hỗ trợ trình duyệt tốt nhất, bạn nên thêm vào tiền tố -webkit--moz-:

.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 20px;

  /* Firefox 1-3.6 */
  -moz-border-radius: 20px;

  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 20px;
}

Đôi khi bạn có thể thấy một ít background-color lem nhem bên ngoài border (xem ví dụ). Để ngăn chặn điều này bạn có thể sử dụng background-clip:

.round {
  border-radius: 10px;

  /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
}

Với chỉ một giá trị, border-radius sẽ áp dụng như nhau cho cả bốn góc của một phần tử. Nhưng nếu bạn muốn chỉ định cho mỗi góc riêng biệt, hãy làm như sau:

.round {
   border-radius: 10px 20px 5px 15px; /* top left, top right, bottom right, bottom left */
}

Một số ví dụ khác:

#round-3 {
  border-radius: 5px 20px 5px;
  background: #F17288;
}
#round-4 {
  border-radius: 10px/30px; /* horizontal radius / vertical radius */
  background: #F17288;
}
#round-5 {
  border-radius: 30px/10px; /* horizontal radius / vertical radius */
  background: #F17288;
}
#round-6 {
   border-radius: 50%;
   background: #F17288;
}
#round-7 {
   border-radius: 50%;
   width: 200px;
   background: #F17288;
}

Trình Duyệt Hỗ Trợ

Thuộc tính border-radius được hỗ trợ trong IE9+, Firefox, Chrome, Safari, và Opera.

Chrome Firefox IE Opera Safari

CSS Border Radius Generator

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s