Tüm CSS Border Özellikleri

• border
• border-top-width
• border-top-style
• border-top-right-radius

border-bottom-color özelliği, border rengini değiştirebilmek için kullanılır.

See the Pen BoazdJ by W3TR (@w3tr) on CodePen.

Varsayılan değeri: elementin geçerli rengi;
border-bottom-color: color | transparent | initial | inherit;

color =  Arka plan rengini belirler. Varsayılan değeri elementin rengidir.
transparent =  Border’ın renginin şeffaf olması gerektiğini belirtir.
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI	CROME	İE	FİREFOX	SAFARİ	OPERA
SÜRÜMÜ	1.0	4.0	1.0	1.0	3.5

TARAYICI:	ANDROİD	CROME FOR ANDROİD	FİREFOX MOBİLE	İE MOBİLE	OPERA MOBİLE	SAFARİ MOBİLE
SÜRÜMÜ	1.0	?	1.0 (1.0)[1]	6.5	11	1.0

border-bottom-right-radius özelliği, border ‘ ın sağ alt köşesine radius değeri tanımlamamızı sağlar.
Not: Bu özellik elementin belirtilen köşesine yuvarlak şeklini kazandırmamızı sağlar.

See the Pen zvYBwV by W3TR (@w3tr) on CodePen.

Varsayılan değeri: 0;
border-bottom-right-radius: length | % [length | %] | initial | inherit;

length =  Sağ alt köşede şeklini tanımlar . Varsayılan değer 0’dır.
% =  % Olarak sağ alt köşesinde şeklini tanımlar
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI	CROME	İE	FİREFOX	SAFARİ	OPERA
SÜRÜMÜ	5.04.0 -webkit-	9.0	4.03.0 -moz-	5.03.1 -webkit-	10.5

TARAYICI:	ANDROİD	CROME FOR ANDROİD	FİREFOX MOBİLE	İE MOBİLE	OPERA MOBİLE	SAFARİ MOBİLE
SÜRÜMÜ	?	?	?	?	?	?

border-bottom-left-radius özelliği, border ‘ ın sol alt köşesine radius değeri tanımlamamızı sağlar.
Not: Bu özellik elementin belirtilen köşesine yuvarlak şeklini kazandırmamızı sağlar.

See the Pen rONLeP by W3TR (@w3tr) on CodePen.

Varsayılan değeri: 0;
border-bottom-left-radius: length | % [length | %] | initial | inherit;

length =  Sol alt köşede şeklini tanımlar . Varsayılan değer 0’dır.
% =  % Olarak sol alt köşesinde şeklini tanımlar
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI	CROME	İE	FİREFOX	SAFARİ	OPERA
SÜRÜMÜ	5.04.0 -webkit-	9.0	4.03.0 -moz-	5.03.1 -webkit-	10.5

TARAYICI:	ANDROİD	CROME FOR ANDROİD	FİREFOX MOBİLE	İE MOBİLE	OPERA MOBİLE	SAFARİ MOBİLE
SÜRÜMÜ	?	?	?	?	?	?

border-bottom-style özelliği, border ‘ ın stil özelliklerini tanımlamamızı sağlar.

See the Pen ojNLbX by W3TR (@w3tr) on CodePen.

Varsayılan değeri: none;
border-bottom-style: none  | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

none =  Hiçbir değer verilmez. Varsayılan değerdir.
hidden =  none değeriyle aynı işlevi görür. Stil verilmemiş sayılır.
dotted = Nokta biçiminde stil verir.
dashed =  Kesik çizgiler halinde stil verir.
solid =  Düz çizgi olarak stil verir.
double =  Düz iki çizgi olarak stil verir.
groove =  Görüntü olarak oyma stili verir.
double =  Düz iki çizgi olarak stil verir.
ridge =  Çıkıntılı bir sınır gibi stil verir.
inset =  Gömülür görünür bir kutu olarak stil verir.
outset = 3D kabartmalı bir sınır olarak stil verir.
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI	CROME	İE	FİREFOX	SAFARİ	OPERA
SÜRÜMÜ	1.0	5.5	1.0	1.0	9.2

TARAYICI:	ANDROİD	CROME FOR ANDROİD	FİREFOX MOBİLE	İE MOBİLE	OPERA MOBİLE	SAFARİ MOBİLE
SÜRÜMÜ	Evet	?	Evet	7.0	Evet	Evet

 

border-bottom-width özelliği, border ‘ ın genişlik boyutunu tanımlamamızı sağlar.
Not: border ‘ ın width özelliğini belirtmeden önce kesinlikle border-style özelliği verilmelidir.

See the Pen ojNxKN by W3TR (@w3tr) on CodePen.

Varsayılan değeri: medium;
border-bottom-width: medium | thin | thick | length | initial | inherit;

medium =  Varsayılan değerdir.
thin =  ince bir sınır sitilini vermemizi sağlar.
length = Nokta biçiminde stil verir.
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI	CROME	İE	FİREFOX	SAFARİ	OPERA
SÜRÜMÜ	1.0	4.0	1.0	1.0	3.5

TARAYICI:	ANDROİD	CROME FOR ANDROİD	FİREFOX MOBİLE	İE MOBİLE	OPERA MOBİLE	SAFARİ MOBİLE
SÜRÜMÜ	?	?	?	?	?	?

border-collapse özelliği, table ve içindeki sutunlar için ayrı ayrı border tanımlamamızı olanak sağlar.

See the Pen OyJNYW by W3TR (@w3tr) on CodePen.

Varsayılan değeri: separate;
border-collapse: separate|collapse|initial|inherit;

separate =  Değerlere boşluk ayırt etmeden border verilmesini sağlar.
collapse =  Genel tabloya border verilir sadece.
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI	CROME	İE	FİREFOX	SAFARİ	OPERA
SÜRÜMÜ	1.0	5.0	1.0	1.2	4.0

TARAYICI:	ANDROİD	CROME FOR ANDROİD	FİREFOX MOBİLE	İE MOBİLE	OPERA MOBİLE	SAFARİ MOBİLE
SÜRÜMÜ	4.0	?	1.0(1.9.2)[1]	7.0	11	1.0

Border-color özelliği bir elementin dört sınırlarının rengini ayarlar. Bu özellik bir ila dört değerlere sahip olabilir.
Not: border-color özelliğinden önce border-style özelliğinin tanımlanmış olması gerekir.

See the Pen WQNwWZ by W3TR (@w3tr) on CodePen.

Varsayılan değeri: elementin geçerli rengi;
border-color: color | transparent | initial | inherit;

color =  Arkaplan rengini belirler varsayılan değer siyahtır.
transparent =  Rengin şeffaf olması gerektiğini belirtir.
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI	CROME	İE	FİREFOX	SAFARİ	OPERA
SÜRÜMÜ	1.0	4.0	1.0	1.0	3.5

TARAYICI:	ANDROİD	CROME FOR ANDROİD	FİREFOX MOBİLE	İE MOBİLE	OPERA MOBİLE	SAFARİ MOBİLE
SÜRÜMÜ	2.3	?	1.0(1.9.2)	7.0	11	3.0