CSS รัศมีชายแดนด้านบนขวา

การกำหนดและการใช้งาน

คุณสมบัติ border-top-right-radius กำหนดรูปทรงของขอบเขตด้านล่างขวาของขอบเขต。

คำแนะนำ:คุณสมบัตินี้อนุญาตให้คุณเพิ่มขอบเขตรูปทรงกลมให้กับองค์ประกอบ。

ดูเพิ่มเติม

CSS3 คู่มือCSS3 ขอบ

ตัวอย่าง

เพิ่มขอบเขตรูปทรงกลมด้านบนขวาขององค์ประกอบ div อย่างไร:

div
{
border:2px solid;
border-top-right-radius:2em;
}

ทดลองด้วยตัวเอง

CSS ภาษา

border-top-right-radius: length|% [length|%];

หมายเหตุ:ความยาวของค่าของ border-top-right-radius และอัตราส่วนเปอร์เซ็นต์กำหนดเส้นรีกวางสี่เหลี่ยมจัตุรัส (กำหนดรูปทรงของขอบเขตด้านนอกของมุม) ของรัศมี (radii)。ค่าแรกคือรัศมีระดับน้ำเงิน，ค่าที่สองคือรัศมีตั้งแต่ด้านลงของรัศมี。ถ้าละเลยค่าที่สอง จะคัดลอกค่าแรกเข้าไปในที่เดียวกัน ถ้าความยาวเท่ากับศูนย์ มุมจะเป็นสี่เหลี่ยมผืนผ้า ไม่ใช่รูปทรงกลม อัตราส่วนรัศมีระดับน้ำเงินอ้างอิงจากความกว้างของกล่องเบราวเซอร์ และอัตราส่วนรัศมีตั้งแต่ด้านลงอ้างอิงจากความสูงของกล่องเบราวเซอร์。

ค่าของคุณสมบัติ

ค่า คำอธิบาย การทดสอบ
length กำหนดรูปทรงด้านบนขวา。 การทดสอบ
% กำหนดรูปทรงด้านบนขวาด้วยอัตราส่วนเปอร์เซ็นต์。 การทดสอบ

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: 0
การสืบทอด: no
เวอร์ชั่น: CSS3
JavaScript ภาษา: object.style.borderTopRightRadius="5px"

การสนับสนุนโปรแกรมนี้

ตารางหลักคำนำเสนอเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้เต็มทั้งหมด。

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5