CSS - Sınır (border) Özelliği

Tanımlar

Dil-Kuralı Art-Alan Yazı Yazı-tipi Sınır Dışçizgi Kenarlar Dolgu Liste Tablo

Gelişmiş

Boyut Sınıflandırma Konumlama Sözde-Sınıf Sözde-Öğe Galeri Donukluk Ortam-Türü

Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Sınır (border) Özelliği

CSS sınır özelliği bir öğenin sınırına ilişkin stil ve renk tanımlamada kullanılır. HTML içinde yazıların çevresine sınır koymak tablolarla yapılır. Fakat CSS sınır özelliği güzel etkileriyle yazıların çevresini sınırlama olanağı oluşturur ve her öğeye uyarlanabilir.

Özellik	Açıklama	Değerler	IE	F	N	W3C
border	Bir tanımda her dört yöndeki sınırları belirlemeye yarayan kısaltılmış bir özelliktir.	sınır-eni sınır-stili sınır-rengi	4	1	4	1
border-bottom	Bir tanımda alt sınırın tüm özelliklerini bir arada tanımlamaya yarayan kısaltılmış tanımdır.	sınır-alt-eni sınır-stili sınır-rengi	4	1	6	1
border-bottom-color	Alt sınırın rengini belirler	sınır-rengi	4	1	6	2
border-bottom-style	Alt sınırın stilini tanımlar	sınır-stili	4	1	6	2
border-bottom-width	Alt sınırın enini tanımlar	thin medium thick uzunluk	4	1	4	1
border-color	Dört sınır için renk belirten değerlerdir. Tek ya da dört renge kadar tanım yapılabilir.	renk	4	1	6	1
border-left	sol sınır için tüm değerleri tanımlamaya yarayan bir kısaltmadır	sol-sınır-eni sınır-stili sınır-rengi	4	1	6	1
border-left-color	Sol sınırın rengini tanımlar	sınır-rengi	4	1	6	2
border-left-style	Sol sınırın stilini tanımlar	sınır-stili	4	1	6	2
border-left-width	Sol sınırın enini tanımlar	thin medium thick uzunluk	4	1	4	1
border-right	Sağ sınır için tüm değerlerin tanımlanabildiği bir kısaltmadır.	sağ-sınır-eni sınır-stili sınır-rengi	4	1	6	1
border-right-color	Sağ sınırın rengini tanımlar	sınır-rengi	4	1	6	2
border-right-style	Sağ sınırın stilini tanımlar	sınır-stil	4	1	6	2
border-right-width	Sağ sınırın enini tanımlar	thin medium thick uzunluk	4	1	4	1
border-style	Dört sınırın stillerini tanımlar. birden dörde kadar stil tanımı yapılabilir.	none hidden dotted dashed solid double groove ridge inset outset	4	1	6	1
border-top	Üst sınırın tüm özelliklerini tanımlamak için kullanılan bir kısaltmadır.	üst-sınır-eni sınır-stili sınır-rengi	4	1	6	1
border-top-color	Üst sınırın rengini tanımlar	sınır-rengi	4	1	6	2
border-top-style	Üst sınırın stilini tanımlar	sınır-stili	4	1	6	2
border-top-width	Üst sınırın enini tanımlar	thin medium thick uzunluk	4	1	4	1
border-width	Bir tanımdaki dört sınırın özelliklerinin belirtildiği kısaltılmış özelliktir. Birden dörde kadar tüm değerler yazılabilir	thin medium thick uzunluk	4	1	4	1

Sınır (border) Özelliği

Bir tanımlamada dört sınır için ayarları atamakda kullanılan bir kısaltmadır.
Yalnız 'border' özelliğini kullanarak dört değeri de ayrı biçimde ayarlamak oalanağı yoktur. Eğer bu özellik istenizse, ayrı ayrı tanımlanmalıdır.

p
{ 
border: thin dotted #00FF00
}

span
{ 
border: solid #0000FF
}

Olası değerler:
sınır-eni: Dört sınır için bu değer atanır
sınır-stili: Dört sınır için bu değer atanır
sınır-rengi: Dört sınır için bu değer atanır

Alt Sınır (border-bottom) Özelliği

Bir tanımlama öğenin alt-sınır özelliklerini atamak için kullanılan kıslatmadır.

table
{ 
border-bottom: thin dotted #00FF00
}

span
{ 
border-bottom: solid #0000FF
}

Olası değerler:
alt-sınır-eni sınır-stili sınır-rengi: alt sınır için bu değerleri atar.

Alt Sınır Renk (border-bottom-color) Özelliği

Bir öğenin alt sınırının rengini atamak için kullanılır.

Not: Her zaman border-style özelliğini border-color özelliğinden önce tanımlayın. Bir öğenin önce sınırları olmalı ki siz o sınırın rengini değiştirebilesiniz.

p
{
border-style: solid;
border-bottom-color: #ff0000
}

p
{
border-style: solid;
border-bottom-color: rgb(255,0,0)
}

Olası değerler:
renk: Renk değer renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000) olabilir.
transparent: Sınır renksizdir.

Alt Sınır Stil (border-bottom-style) Özelliği

Bir ögenin alt sınır stilini tanımlamakta kullanılır.

table
{ 
border-bottom-style: solid
}

Olası değerler:
none: sınır olmadığını anlatır.
hidden: tablo öğeleri için sınır karışmasını önlemekte kullanılır "none" gibidir.
dotted: Noktalı sınır tanımlamak için kullanılır. Pekçok tarayıcıda düz çizgi olarak görüntülenebilir.
dashed: Kesik çizgili sınırı tanımlar. Pekçok tarayıcıda düz çizgi olarak görüntülenir.
solid: Düz çizgi
double: İkili sınırı tanımlar. İkili sınırın eni sınır-eni değeri gibidir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.
vascript

Alt Sınır En (border-bottom-width) Özelliği

Alt sınır eni bir öğenin alt sınır enini belirlemekte kullanılır.

able
{ 
border-style: solid;
border-bottom-width: thin
}

table
{ 
border-style: solid;
border-bottom-width: 0.5px
}

Olası değerler:
thin: İnce alt sınırı tanımlar
medium: Varsayılan değer. Orta kalınlıkta sınırı tanımlar.
thick: Kalın alt sınırı tanımlar
uzunluk: Alt sınırın kalınlığını belirlemekte kullanılır.

Sınır rengi (border-color) Özelliği

The border-color property sets the color of the four borders. This property can take one to four colors.

table {border-color: red}
dört sınırın rengi kırmızıdır

table {border-color: red green}
üst ve alt sınır kırmızı,
sol ve sağ sınırlarsa yeşil...

table {border-color: red green blue}
üst sınır kırmızı, sol ve sağ sınır yeşil,
alt sınır mavidir.

table {border-color: red green blue yellow}
üst sınır kırmızı, sağ sınır yeşil,
alt sınır mavi, sol sınır sarıdır

Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)),
ya da hex sayı (#FF0000) olabilir.
transparent: Sınır renksizdir

Sol sınır (border-left) Özellikleri

Sol sınır özelliği bir tanımlamayla sol sınırın tüm özelliklerini birden atamaya yarar.

table
{ 
border-left: thin dotted #00FF00
}

table
{ 
border-left: thick #0000FF
}

Olası değerler: Sol-sınır-eni Sınır-stili sınır-rengi: Sol sınırın özelliklerini atar.

Sol Sınır Renk (border-left-color) Özelliği

Sol sınır renk özelliği öğenin sol sınırının rengini saptar.

p
{
border-style: solid;
border-left-color: #ff0000
}

p
{
border-style: solid;
border-left-color: rgb(255,0,0)
}

Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000)
transparent: Sınır değeri renksizdir.

Sol sınır stil (border-left-style) Özelliği

Sol sınır stil tanımı öğenin sol sınırını tanır.

table
{ 
border-left-style: solid
}

Olası değerler:
none: Hiç sınır olmadığı belirtir hidden: "none" ile aynı, yalnız tablo öğeleriyle doğacak görüntüleme sorunu doğar. dotted: noktalı çizgiyi tanımlar ama birçok tarayıcıda düz çizgi olur. dashed: kesik çizgili sınır çizgisini tanımlar ama birçok tarayıcıda düz çizgi olur. solid: Düz çizgiyi tanımlar double: İkili sınır çizgisini tanımlar. İkili sınır çizgisinin eni border-width tanımındaki değere eşittir. groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Sol sınır eni (border-left-width) Özelliği

The border-left-width property sets the width of an element's left border.

table
{ 
border-style: solid;
border-left-width: thin
}

table
{ 
border-style: solid;
border-left-width: 0.5cm
}

Olası değerler:
thin: Sol sınırın ince olduğunu tanımlar
medium: Varsayılan değer. sol sınırın değeri medium olur.
thick: Sol sınır kalındır tanımı.
uzunluk: Sol sınırın kalınlığını belirlemenizi sağlar

Sağ sınır (border-right) Özelliği

Sağ sınır özelliği sağ sınırın enini, stilini ve rengini tanımlamak için kullanılan kısaltılmış bir tanımlamadır.

table
{ 
border-right: thin dotted #00FF00
}

table
{ 
border-right: thick #0000FF
}

Olası değerler:
sağ-sınır-eni sınır-stili sınır-rengi: Sağ sınırın özelliklerini atar.

Sağ sınır renk (border-right-color) özelliği

Sağ sınır rengi özelliği bir öğenin sağ sınırının rengini tanımlar.

p
{
border-style: solid;
border-right-color: #ff0000
}

p
{
border-style: solid;
border-right-color: rgb(255,0,0)
}

Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000)
transparent: Sınır değeri renksizdir.

Sağ sınır stil (border-right-style) Özelliği

Sağ sınır stil özelliği bir öğenin sağ sınırının stilini tanımlar.

able
{ 
border-right-style: solid
}

Olası değerler:
none: Hiç sınır olmadığı belirtir
hidden: "none" ile aynı, yalnız tablo öğeleriyle doğacak görüntüleme sorunu doğar.
dotted: Noktalı çizgiyi tanımlar ama birçok tarayıcıda düz çizgi olur.
dashed: Kesik çizgili sınır çizgisini tanımlar ama birçok tarayıcıda düz çizgi olur.
solid: Düz çizgiyi tanımlar
double: İkili sınır çizgisini tanımlar. İkili sınır çizgisinin eni border-width tanımındaki değere eşittir.
groove: Üç boyutlu sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
ridge: Üç boyutlu çıkıntılı sınırı tanımlar. Etkisi sınır renginin değerine bağlıdır.
inset: Üç boyutlu ek sınırı tanımlar. Etkisi sınır rengi değerine bağlıdır.
outset: Üç boyutlu başlangıç sınırını tanımlar. Etkisi sınır renginin değerine bağlıdır.

Sağ Sınır eni (border-right-width) Özelliği

Sağ sınır eni öğenin sağ sınırındaki eni tanımlar.

able
{ 
border-style: solid;
border-right-width: thin
}

table
{ 
border-style: solid;
border-right-width: 0.5cm
}

Olası değerler:
thin: Sağ sınırın ince olduğunu tanımlar
medium: Varsayılan değer. sağ sınırın değeri medium olur.
thick: Sağ sınır kalındır tanımı.
uzunluk: Sağ sınırın kalınlığını belirlemenizi sağlar

Sınır stili (border-style) Özelliği

Sınır-stili özelliği, dört sınır için stil tanımlar.

table {border-style: dotted}
her dört sınır noktalıdır

table {border-style: dotted dashed}
üst ve alt sınırlar noktalıdır,
sol ve sağ sınır kesik çizgisidir

table {border-style: dotted dashed solid}
üst sınır noktalı,
sol ve sağ sınır kesik çizgisidir,
alt sınır kesintisiz çizgidir.

table {border-style: dotted dashed solid double}
üst sınır noktalı,
sağ sınır kesik çizgili,
alt sınır kesintisiz çizgi,
sol sınır ise çift çizgidir.

Üst Sınır (border-top) özelliği

Üst sınır özelliği bir tanım için kısaltılmış olarak tüm üst sınır özelliklerinin değerinin belirtilmesi istemidir.

table
{ 
border-top: thin dotted #00FF00
}

table
{ 
border-top: solid #0000FF
}

Olası değerler:
üst-sınır-eni sınır-stili sınır-rengi: üst sınırın özellikleridir.

Üst Sınır Renk (border-top-color) Özelliği

Öğenin üst sınır rengini tanımlamakta kullanılır.

p
{
border-style: solid;
border-top-color: #ff0000
}

p
{
border-style: solid;
border-top-color: rgb(255,0,0)
}

Olası değerler:
renk: Renk değeri renk adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#FF0000)
transparent: Sınır değeri renksizdir.

Üst Sınır Stil (border-top-style) Özelliği

Bir öğenin üst sınırının stilini tanımlamakta kullanılır.

table
{ 
border-top-style: solid
}

Üst Sınır (border-top) özelliği

Üst sınır özelliği bir tanım için kısaltılmış olarak tüm üst sınır özelliklerinin değerinin belirtilmesi istemidir.

Üst Sınır Eni (border-top-width) Özelliği

Üst Sınır eni özelliği bir öğenin üst sınırının enini belirtir.

table
{ 
border-style: solid;
border-top-width: thin
}

table
{ 
border-style: solid;
border-top-width: 0.5cm
}

Olası değerler:
thin: Üst sınırın ince olduğunu tanımlar
medium: Varsayılan değer. üst sınırın değeri medium olur.
thick: Üst sınır kalındır tanımı.
uzunluk: Üst sınırın kalınlığını belirlemenizi sağlar

Sınır Eni (border-width) Özelliği

Sınır-eni özelliği, bir tanımda dört sınırın enini tanımlamaya yarayan kısaltmadır.

table {border-width: thin}
dört sınır da incedir.

table {border-width: thin medium}
üst ve alt sınır incedir,
sol ve sağ sınırlar orta kalınlıktadır.

table {border-width: thin medium thick}
üst sınır incedir,
sol ve sağ sınır orta kalınlıktadır,
alt sınır ise kalındır.

table {border-width: thin medium thick none}
Üst sınır ince,
sağ sınır orta kalınlıkta,
alt sınır kalın ve
sol kenarda sınır yoktur.

Olası değerler:
thin: Sınırın ince olduğunu tanımlar
medium: Varsayılan değer. sınırın değeri medium olur.
thick: Sınır kalındır tanımı.
uzunluk: Sınırın kalınlığını belirlemenizi sağlar