Ngôn ngữ CSS - CSS3 Rounded Coner
Bài trước
Bài sau

CSS3 Rounded Coner (góc bo tròn)

CSS3 cùng với HTML5 cung cấp cho bạn những tính năng tuyệt vời để xây dựng đồ họa cho trang web mà không cần dùng hình ảnh. Với CSS2, để tạo góc tròn cho các nút bấm bạn phải sử dụng hình ảnh nhưng với CSS3 mọi chuyện trở nên rất đơn giản.
Để tạo bo tròn đường viền bằng CSS3 thì ta sử dụng những cú pháp sau:

tagName {
    border: bề-dày kiểu mã-màu;
    border-radius: giá trị;
    -moz-border-radius: giá trị;
    -webkit-border-radius: giá trị;
    -ms-border-radius: giá trị;
    -o-border-radius: giá trị;
}

Trong đó:

  • -moz-animation hỗ trợ cho firefox.
  • -webkit-animation hỗ trợ cho Google Chrome và Safari.
  • -ms-animation hỗ trợ cho Internet Explorer.
  • -o-animation hỗ trợ cho Opera

Bảng giá trị:

Giá trị Giải thích
border-radius Cả 4 góc đều được uốn cong.
border-top-left-radius Góc trên - bên trái sẽ được uốn cong.

border-top-right-radius

Góc trên - bên phải sẽ được uốn cong.
border-bottom-right-radius Góc dưới - bên trái sẽ được uốn cong.
border-bottom-left-radius Góc dưới - bên trái sẽ được uốn cong.

Ví dụ:

<html>
   <head>
   
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      </style>
      
   </head>
   <body>
      <p id="rcorners1"></p>
      <p id="rcorners2"></p>
      <p id="rcorners3"></p>
   </body>
<body>

Xem ví dụ

Trình duyệt hỗ trợ
Yêu cầu phiên bản trình duyệt tối thiểu được hỗ trợ cho thuộc tính border-radius:

Thuộc tính Chrome IE Firefox Opera Safari
border-radius 5 9 4 10.5 5.1

Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×