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

Önceki sayfa border-start-end-radius
Sonraki sayfa border-style

Tanım ve Kullanım

border-start-start-radius özellik, elementin blok yönelim başlangıcı (block-start) ve satır içi yönelim başlangıcı (inline-start) arasındaki köşe yarıçapını tanımlamak için kullanılır.

Dikkat:ilgili CSS özelliklerini de etkiler writing-mode,text-orientation ve direction blok yönelimini ve satır içi yönelimi tanımlar. Bu nedenle bu özellikler, border-start-start-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-start-radius özellik iki değere sahipse, köşeler bir elips olacaktır:

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

Eğer border-start-start-radius özellik bir değere sahipse, köşeler bir daire olacaktır:

border-start-start-radius: 50px;

CSS border-start-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-start-start-radius Özellik, düzenli yönelim ve satır içi yönelime bağımlıdır.

Örnek

Örnek 1

Bazı elementlerin düzenli yönelim başlangıcı ve satır içi yönelim başlangıcı yuvarlak köşelerine ekleyin:

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

Kişisel olarak deneyin

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

Düzenli yönelim ve satır içi yönelim başlangıcı yuvarlak köşe konumları direction Özellik etkisi:

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

Kişisel olarak deneyin

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

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

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

Kişisel olarak deneyin

CSS dilbilgisi

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

Özellik değeri

Değer	Açıklama
0	Varsayılan değer.
length	Düzenli blok başlangıcı ve satır içi başlangıcı yuvarlak köşe şeklini tanımlar. Bakınız:CSS Birimleri.
%	Bu yuvarlak köşe şeklini, 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, ana elementinden miras alır. Bakınız inherit.

Teknik ayrıntılar

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