Thuộc Tính Border-radius | CSS3 | Học Web Chuẩn

Trang chủ » Viền Tròn Css » Thuộc Tính Border-radius | CSS3 | Học Web Chuẩn

Có thể bạn quan tâm

Thuộc tính border-radius
  • Trang chủ
  • Tham khảo
  • CSS
  • CSS3
  • Thuộc tính border-radius

Định nghĩa và sử dụng

Thuộc tính border trong css3 dùng để định dạng các dạng bo góc của border ngoài dạng đã được định nghĩa ở css2 (Xem thêm về border trong css2).

Cấu trúc

tag { 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.

Thuộc tính của border-radius trong css3:

Thuộc tính giá trị Ví dụ Mô tả
border-top-left-radius 1 giá trị [top-left] border-top-left-radius: 5px; Góc trên - bên trái sẽ được uốn cong.
2 giá trị [top] [left] border-top-left-radius: 5px 10px;
border-top-right-radius 1 giá trị [top-right] border-top-right-radius: 5px; Góc trên - bên phải sẽ được uốn cong.
2 giá trị [top] [right] border-top-right-radius: 5px 10px;
border-bottom-left-radius 1 giá trị [bottom-left] border-bottom-left-radius: 5px; Góc dưới - bên trái sẽ được uốn cong.
2 giá trị [bottom] [left] border-bottom-left-radius: 5px 10px;
border-bottom-right-radius 1 giá trị [bottom-right] border-bottom-right-radius: 5px; Góc dưới - bên phải sẽ được uốn cong.
2 giá trị [bottom] [right] border-bottom-right-radius: 5px 10px;
border-radius 1 giá trị [top-left top-right bottom-left bottom-right] border-radius: 5px; Cả 4 góc đều được uốn cong.
2 giá trị [top-left bottom-right] [top-right bottom-left] border-radius: 5px 10px;
3 giá trị [top-left] [top-right bottom-left] [bottom-right] border-radius: 5px 10px 4px;
4 giá trị [top-left] [top-right] [bottom-left] [bottom-right] border-radius: 5px 10px 4px 8px;

Ví dụ

Xem thêm ví dụ

HTML viết:

<html> <head></head> <body> <p>border image</p> </body> </html>

Hiển thị trình duyệt khi chưa có CSS:

border image

CSS viết:

p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }

Hiển thị trình duyệt khi có CSS:

border image

Trình duyệt và hệ điều hành hỗ trợ

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

Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
border-radius 9 4 10.5 5 5.1 3.2 2.1 7.5

Link liên quan

  • HTML/XHTML
  • CSS
  • class
  • <html></html>
  • <head></head>
  • <body></body>
  • <p></p>

border-image

box

CSS

HƯỚNG DẪN HỌC

  • Hướng dẫn học
  • Hướng dẫn học XHTML & HTML5
  • Hướng dẫn học CSS
  • Hướng dẫn học CSS3
  • Hướng dẫn học Responsive
  • Hướng dẫn học ES6
  • Hướng dẫn học React.js
  • Hướng dẫn học jQuery
  • Hướng dẫn học PHP
  • Hướng dẫn học Laravel
  • Hướng dẫn học Wordpress
  • Hướng dẫn học Webpack
  • Hướng dẫn học SCSS

THAM KHẢO

Thuộc tính CSS3

  • animation
  • appearance
  • backface-visibility
  • background-clip
  • background-origin
  • background-size
  • background gradient
  • Nhiều background
  • border-image
  • border-radius
  • box-align
  • box-direction
  • box-flex
  • box-ordinal-group
  • box-orient
  • box-pack
  • box-sizing
  • box-shadow
  • column
  • @font-face
  • font-size-adjust
  • @keyframes
  • nav
  • opacity
  • perspective
  • perspective-origin
  • resize
  • text-justify
  • text-overflow
  • text-shadow
  • transform
  • transform-origin
  • transform-style
  • transition
  • word-break
  • word-wrap

Thuộc tính CSS3 chưa được hỗ trợ bởi trình duyệt

  • grid-columns
  • grid-rows
  • hanging-punctuation
  • icon
  • punctuation-trim
  • rotation
  • target
  • text-outline
  • text-wrap

Tham khảo CSS

  • CSS - Tham khảo
  • CSS - Bộ chọn (selectors)
  • CSS - Thuộc tính
  • CSS3 - Tham khảo
  • CSS3 - Bộ chọn (selectors)
  • CSS3 - Thuộc tính
  • Xem thêm ví dụ về CSS

Tham khảo HTML/XHTML

  • Tham khảo HTML/XHTML
  • Tag theo function
  • Tag theo giá trị DTD
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Xem thêm ví dụ về HTML

Tham khảo JQUERY

  • jQuery - Tham khảo
  • jQuery - Cài đặt và sử dụng
  • jQuery - Bộ chọn (selectors)
  • jQuery - Hàm (function)
  • jQuery - Ajax

Tham khảo Thêm

  • Lang codes
  • Font chữ
  • Mã ký tự
  • MIME
  • Đơn vị trong HTML & CSS
  • Giá trị màu trong HTML & CSS
  • Thuộc tính tổng quát

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • BẠN SẼ TÀI TRỢ?DONATE
  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Viền Tròn Css