CSS border-start-end-radius özelliği

Önceki Sayfa border-spacing
Sonraki Sayfa border-start-start-radius

Tanım ve Kullanım

border-start-end-radius özellik, elemanın blok yönü başlangıç noktası (block-start) ve satır içi yönü son noktası (inline-end) arasındaki yuvarlak köşe yarıçapını tanımlamak için kullanılır.

Dikkat:ilgili CSS özellikleri writing-mode,text-orientation ve direction blok yönelimini ve satır içi yönelimi tanımlar. Bu nedenle bu özellikler de etkilenebilir border-start-end-radius özellik sonuçları. İngilizce sayfalar için, satır içi yönelim sağdan sola, blok yönelimi aşağıya doğru olacaktır.

Eğer border-start-end-radius özellik iki değere sahipse, yuvarlak bir elips olacak:

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

Eğer border-start-end-radius özellik bir değere sahipse, yuvarlak bir köşe olacak:

border-start-end-radius: 50px;

CSS border-start-end-radius özellik ile border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius ve border-top-right-radius Özellikler çok benzerdir, ancak border-start-end-radius Özellik, blok yönüne ve satır içi yönüne bağımlıdır.

Örnek

Örnek 1

Bazı elementlerin blok yönünün başlangıcı ve satır içi yönünün sonundaki yuvarlak köşelere ekleyin:

#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;
}

Kişisel olarak deneyin

Örnek 2: direction özelliği ile birleştirme

Blok yönünün başlangıcı ve satır içi yönünün sonundaki yuvarlak köşe konumları direction Özellik etkisi:

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

Kişisel olarak deneyin

Örnek 3: writing-mode özelliği ile birleştirme

Blok yönünün başlangıcı ve satır içi yönünün sonundaki yuvarlak köşe konumları writing-mode Özellik etkisi:

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

Kişisel olarak deneyin

CSS dilbilgisi

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

Özellik değeri

Değer	Açıklama
0	Varsayılan değer.
length	Satır içi yönün başlangıç ve blok yönünün sonundaki yuvarlak köşe şekillerini tanımlar. Aşağıdan bakın:CSS Birimleri.
%	Yuvarlak köşe şekillerini, elementin ilgili eksen üzerindeki uzunluğun yüzdesi olarak tanımlar.
initial	Bu özelliği varsayılan değerine ayarlayın. Bakınız initial.
inherit	Bu özelliği, ebeveyn elementinden miras alır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer:	0
Miras:	Hayır
Animasyon yapımı:	Desteklenir. Aşağıdan bakın:Animasyonla ilgili özellikler.
Sürüm:	CSS3
JavaScript dilbilgisi:	object.style.borderStartEndRadius="50px"