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

Önceki sayfa border-end-end-radius
Sonraki sayfa border-image

Tanım ve Kullanım

border-end-start-radius Özellik, elementin blok yönü sonunda (block-end) ve satır içi yönü başında (inline-start) arasındaki yuvarlak kenarlık genişliğini 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 etkilendirir border-end-start-radius Özellik sonuçları. İngilizce sayfalarda, satır içi yönelim soldan sağa, blok yönelimi yukarı doğru olup.

Eğer border-end-start-radius Özellik iki değere sahipse, yuvarlak bir elips oluşturur:

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

Eğer border-end-start-radius Özellik bir değere sahipse, yuvarlak bir kenarlık oluşturur:

border-end-start-radius: 50px;

CSS border-end-start-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-end-start-radius Özellik, bloklama yönüne ve satır içi yönüne bağlıdır.

Örnek

Örnek 1

Bazı elementlerin bloklama yönünün sonunda ve satır içi yönünün başlangıcına yuvarlak köşeler ekleyin:

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

Kişisel olarak deneyin

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

Bloklama yönünün sonunda ve satır içi yönünün başlangıcındaki yuvarlak köşeler, direction Özelliğin etkisi:

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

Kişisel olarak deneyin

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

Bloklama yönünün sonunda ve satır içi yönünün başlangıcındaki yuvarlak köşeler, writing-mode Özelliğin etkisi:

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

Kişisel olarak deneyin

CSS dilbilgisi

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

Özellik değeri

Değer	Açıklama
0	Varsayılan değer.
length	Bloklama yönünün sonunda ve satır içi yönünün başlangıcındaki yuvarlak şekli tanımlar. Bakınız:CSS 单位.
%	Bu blok yuvarlak şeklinin uzunluğunu, elementin ilgili eksenindeki uzunluğun yüzdesi olarak tanımlar.
initial	Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit	Bu özelliği ebeveyn elemanından devralır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer:	0
Devralabilirlik:	Hayır
Animasyon yapımı:	Desteklenir. Bakınız:Animasyonla ilgili özellikler.
Sürüm:	CSS3
JavaScript dilbilgisi:	object.style.borderEndStartRadius="50px"