bảng lịch

Sách tham khảo CSS

Thuộc tính CSS

Khóa học chọn lọc

Khuyến nghị khóa học:

Bao bì CodeW3C.com

Thuộc tính border-start-end-radius CSS

Trang trước border-spacing
Trang tiếp theo border-start-start-radius

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

border-start-end-radius thuộc tính được sử dụng để định nghĩa bán kính góc tròn giữa nơi bắt đầu hướng khối (block-start) và cuối hướng nội bộ (inline-end) của phần tử.

Lưu ý:thuộc tính CSS liên quan writing-mode,text-orientation và direction định nghĩa hướng khối và hướng nội bộ. Đó là lý do tại sao các thuộc tính này cũng ảnh hưởng đến border-start-end-radius kết quả của thuộc tính. Đối với trang tiếng Anh, hướng nội bộ là từ trái qua phải, hướng khối là xuống.

nếu border-start-end-radius nếu thuộc tính có hai giá trị, góc tròn sẽ là hình elip:

border-start-end-radius: 50px 100px;

nếu border-start-end-radius nếu thuộc tính có một giá trị, góc tròn sẽ là hình tròn:

border-start-end-radius: 50px;

CSS border-start-end-radius thuộc tính và border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius và border-top-right-radius Rất giống nhau, nhưng border-start-end-radius Thuộc tính phụ thuộc vào hướng khối và hướng nội.

Thực 例

Ví dụ 1

Thêm góc tròn tại điểm bắt đầu hướng khối và kết thúc hướng nội của một số elemen:

#example1 {
  background-color: lightblue;
  border-start-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-end-radius: 50%;
direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-end-radius: 50%;
  writing-mode: vertical-rl;
}

Thử ngay

Ví dụ 2: Kết hợp thuộc tính direction

Vị trí góc tròn bắt đầu hướng khối và kết thúc hướng nội bị ảnh hưởng bởi direction Tác động của thuộc tính:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-end-radius: 25px;
}

Thử ngay

Ví dụ 3: Kết hợp thuộc tính writing-mode

Vị trí góc tròn bắt đầu hướng khối và kết thúc hướng nội bị ảnh hưởng bởi writing-mode Tác động của thuộc tính:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-end-radius: 25px;
}

Thử ngay

Cú pháp CSS

border-start-end-radius: 0|length|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
0	Giá trị mặc định.
length	Định nghĩa hình dạng góc tròn tại điểm bắt đầu hướng khối và điểm kết thúc hướng nội. Xem thêm:Đơn vị CSS.
%	Định nghĩa hình dạng góc tròn, bằng phần trăm của độ dài của elemen trên trục tương ứng.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thực hiện thuộc tính này từ elemen cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	0
Kế thừa:	Không
Chế tạo animation:	Hỗ trợ. Xem thêm:Các thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.borderStartEndRadius="50px"