CSS kenarlığı: yarıçap, renk, stil ve diğer CSS kenarlık özellikleri

Genel kenarlık özelliği, bir öğenin çevresindeki kenarlığın kalınlığını, stilini ve rengini aynı anda ayarlamanıza olanak tanır. Değerler boşlukla ayrılmış herhangi bir sırada olabilir; hangisinin istenen özelliğe karşılık geldiğini tarayıcının kendisi belirleyecektir. Bir öğenin yalnızca belirli taraflarına kenarlık ayarlamak için border-top, border-bottom, border-left, border-right özelliklerini kullanın.

kısa bilgi

Tanımlar

	Tanım	Örnek
<тип>	Değerin türünü belirtir.	<размер>
A&&B	Değerler belirtilen sıraya göre çıkarılmalıdır.	<размер> && <цвет>
bir | B	Önerilen değerlerden (A veya B) yalnızca bir değer seçmeniz gerektiğini belirtir.	normal | küçük şapkalar
bir || B	Her değer bağımsız olarak veya diğerleriyle birlikte herhangi bir sırayla kullanılabilir.	genişlik || saymak
	Değerleri gruplandırır.	[ kırpma || geçmek ]
*	Sıfır veya daha fazla kez tekrarlayın.	[,<время>]*
+	Bir veya daha fazla kez tekrarlayın.	<число>+
?	Belirtilen tür, kelime veya grup isteğe bağlıdır.	ek?
(A, B)	En az A'yı tekrarlayın, ancak en fazla B kez tekrarlayın.	<радиус>{1,4}
#	Virgülle ayırarak bir veya daha fazla kez tekrarlayın.	<время>#

×

Değerler

Kenarlık genişliği değeri kenarlığın kalınlığını belirler. Görünümünü kontrol etmek için çeşitli kenarlık stili değerleri sağlanmıştır. İsimleri ve eylemin sonucu Şekil 1'de sunulmaktadır. 1.

Şekil 1. Çerçeve stilleri

border-color kenarlığın rengini ayarlar; değer CSS'nin izin verdiği herhangi bir formatta olabilir.

Örnek

İÇİNDE bu örnekte bloğun etrafına eklendi çift ​​kenarlık. Sonuç Şekil 2'de gösterilmektedir. 2.

Pirinç. 2. Border özelliğinin uygulanması

Nesne Modeli

Bir obje.tarz.kenarlık

Not

Tarayıcı İnternet Explorer Altıncı sürüme kadar, 1 piksel kenarlık kalınlığıyla noktalı olarak kesikli olarak görüntülenir. 2 piksel ve üzeri kalınlıkta noktalı değer doğru şekilde çalışır. Bu hata IE7'de düzeltildi, ancak yalnızca tüm 1 piksel kenarlıklar için. Blok kenarlıklarından birinin kalınlığı 2 piksel veya daha yüksekse, IE7'de noktalı değer kesikli değere dönüşür.

Kenarlık stili farklı tarayıcılar oluk, çıkıntı, iç metin veya dış kenar değerleri kullanıldığında biraz değişebilir.

Şartname

Her spesifikasyon birkaç onay aşamasından geçer.

• Öneri - Spesifikasyon W3C tarafından onaylanmıştır ve standart olarak önerilmektedir.
• Aday Tavsiyesi ( Olası öneri) - standarttan sorumlu grup, hedeflerini karşıladığından memnundur ancak standardı uygulamak için geliştirme topluluğunun yardımına ihtiyaç duyar.
• Önerilen Öneri Önerilen Öneri) - bu aşamada belge nihai onay için W3C Danışma Konseyine sunulur.
• Çalışma Taslağı - Topluluğun incelemesi için tartışılan ve değiştirilen taslağın daha olgun bir versiyonu.
• Editörün taslağı ( Editör taslağı) - proje editörleri tarafından değişiklikler yapıldıktan sonra standardın taslak versiyonu.
• Taslak ( Taslak spesifikasyon) - standardın ilk taslak versiyonu.

×

CSS sınırıöğe, öğenin içeriğini çevreleyen bir veya daha fazla satırdır ve dolgu malzemesi. Kenarlık, steno kenarlık özelliği kullanılarak belirtilir. Çerçeve stili üç özellik kullanılarak ayarlanır: stil, renk Ve Genişlik.

CSS özelliklerini kullanarak HTML öğelerinin çerçevelerini ve kenarlıklarını dekore etme

1. Kenarlık stili

Varsayılan olarak kenarlıklar her zaman öğenin arka planının üstüne çizilir ve arka plan öğenin dış kenarına kadar uzanır. Çerçeve stili, görünümünü belirler; bu özellik olmadan çerçeveler hiçbir şekilde görünmez. kullanarak bir öğenin her tarafına aynı anda kenarlık ayarlayabilirsiniz. kenarlık stili özellikleri veya border-top-style vb. açıklayıcı özellikleri kullanarak her bir taraf için ayrı ayrı. Miras alınmadı.

kenar stili (üst kenar stili, sağ kenar stili, alt kenar stili, sol kenar stili)
Değerler:
hiçbiri	Varsayılan değer çerçeve olmadığı anlamına gelir. Ayrıca belirli bir değere sahip bir grup öğeden bir öğenin kenarlığını kaldırır bu mülkün.
gizlenmiş	Hiçbirine eşdeğer değil.
noktalı	noktalı
kesikli	kesikli
sağlam	sağlam
çift	çift
oluk	oluk
çıkıntı	çıkıntı
ek	ek
başlangıç	başlangıç
{1,4}	Yalnızca border-style özelliği için, bir öğenin kenarlığı için dört farklı stili aynı anda listeleme: (kenarlık stili: düz noktalı yok noktalı;)
ilk
miras almak

Sözdizimi

P (kenarlık stili: düz;) p (kenarlık üst stili: düz;)

2. Çerçeve rengi kenar rengi

Özellik, tüm kenarlardaki çerçevelerin rengini aynı anda ayarlar. Açıklayıcı özellikleri kullanarak öğenin her bir tarafının kenarlığı için farklı bir renk ayarlayabilirsiniz. Çerçeve için renk belirtilmezse öğe metninin rengiyle aynı olacaktır. Öğenin metni yoksa kenarlık rengi ana öğenin metin rengiyle aynı olacaktır. Miras alınmadı.

sınır rengi (kenarlık-üst-renk, kenarlık-sağ-renk, kenarlık-alt-renk, kenarlık-sol-renk)
Değerler:
şeffaf	Yüklemeler şeffaf renkçerçeve için. Aynı zamanda çerçevenin genişliği de kalır. Öğenin yerinden çıkmasını önlemek için fareyi bir öğenin üzerine getirdiğinizde kenarlık rengini değiştirmek için kullanılabilir.
renk	Çerçevelerin rengi, özelliğin değerleri kullanılarak ayarlanır. (kenarlık rengi: #cacd58;)
{1,4}	Yalnızca border-color özelliği için, bir öğenin kenarları için dört farklı rengin aynı anda listelenmesi: (kenarlık rengi: #cacd58 #5faf8a #b9cea5 #aab238;)
ilk	Özellik değerini varsayılan değere ayarlar.
miras almak	Özellik değerini üst öğeden devralır.

Sözdizimi

P (kenarlık rengi: #cacd58;)

3. Kenar genişliği

Çerçeve genişliği uzunluk birimleri kullanılarak belirtilir veya anahtar kelimeler. border-style özelliği none olarak ayarlandıysa ve öğenin kenarlığı bir miktar genişliğe ayarlandıysa, o zaman bu durumdaÇerçeve genişliği sıfıra ayarlanmıştır. Miras alınmadı.

Sözdizimi

P (kenarlık genişliği: 2px;)

4. Tek özelliğe sahip bir çerçeve ayarlama

border özelliği şu özellikleri birleştirmenize olanak tanır: border-width , border-style , border-color örneğin:

Div ( genişlik: 100 piksel; yükseklik: 100 piksel; kenarlık: 2 piksel düz gri; )

Bu durumda belirtilen özellikler, elemanın tüm sınırlarına aynı anda uygulanacaktır. Herhangi bir değer belirtilmezse, varsayılan değer onun yerini alacaktır.

5. Bir öğenin bir kenarlığı için çerçeve ayarlama

Ayarlamanın gerekli olması durumunda Farklı Stil Bir öğenin sınırlarını belirlerken, karşılık gelen sınır için kısayol gösterimini kullanabilirsiniz.
Aşağıda listelenen özellikler, şu özellikleri tek bir bildirimde birleştirir: border-width, border-style ve border-color. Özelliklerin listesi belirli bir sırayla belirtilirken, bir veya iki değer atlanabilir, bu durumda değerleri varsayılan değerleri alır.

Üst kenarlığın stili border-top özelliği, alt - border-bottom, left - border-left ve right - border-right kullanılarak ayarlanır.

Sözdizimi

P (üst kenar: 2 piksel düz gri;)

6. Dış kontur taslağı

Özellik, elemanların etrafında (yani normal sınırın dışında) bir dış sınır belirtir. Bu özelliğin temel amacı bir öğeyi vurgulamaktır. Border özelliğinden farklı olarak, bu özelliğin uygulanması öğenin boyutunu veya konumunu etkilemez çünkü anahat öğe bloğunun üstünde görüntülenir ve bu da örtüşmeye yol açabilir kenar boşlukları eleman ve komşu alanlar.

Ayrıca dış kontur, elemanın çerçevesinden farklı olarak elemanı her taraftan çevreleyerek onu tamamen çerçeveler.

Dış hat her zaman dikdörtgen şeklindedir ve sınır yarıçapının belirtildiği bloğun kenarlığını takip etmez.

Outline özelliği şu özellikleri birleştirmenize olanak tanır: Outline-Color, Outline-Style, Outline-Width. Herhangi bir değer belirtilmezse, varsayılan değer onun yerini alacaktır.

Div ( genişlik: 100 piksel; yükseklik: 100 piksel; ana hat: #cacd58 katı 2 piksel; )

6.1. anahat stili

Dış kontur çizgisinin görünümü, elemanın çerçevesinin stiline benzer şekilde ayarlanır. Miras alınmadı.

Sözdizimi

P (anahat stili: çıkıntı;)

6.2. Dış anahat rengi anahat rengi

Dış konturun rengi yalnızca şu durumlarda belirtilebilir: değeri belirle anahat tarzı. Miras alınmadı.

Sözdizimi

P ( anahat stili: çıkıntı; anahat rengi: gümüş; )

6.3. Dış anahat kalınlığı anahat genişliği

Dış kontur çizgisinin kalınlığı, elemanın çerçevesinin kalınlığına benzer şekilde ayarlanır. Miras alınmadı.

Sözdizimi

P ( anahat stili: noktalı; anahat genişliği: 5 piksel; )

Önceki makalede tartıştık CSS uygulamak sayfa öğelerinin border() özellikleri. Ve sana, sınırları çizmek için resimleri nasıl kullanabileceğini anlatacağıma söz verdim. Bugün bunun hakkında konuşacağız.

Kenarlık oluşturmak amacıyla görüntüleri kullanmak için CSS'nin border-image özelliğini kullanacağız.

Kenarlıkların kalınlığı özellik tarafından ayarlanır ve kenarlık: 0 belirtilirse kenarlık görüntülenmez. Diğer kenarlık değerlerinde görüntü her zaman önceliklidir. Arka plan özelliği aracılığıyla belirtilirse arka plan çerçevenin altında görüntülenir.

Kod sözdizimi

Bir mülkiyet kaydı örneğine bakalım:

border-image: url (images/bg-image.png ) 30 yuvarlak yuvarlak;

url (images/bg-image.png) — arka plan görselinin adresi.

30 - görüntünün bölümlerinin boyutlarını piksel cinsinden belirten, böylece resmin bölünme alanlarını tanımlayan bir, iki, üç veya dört değer olabilir. Birimlerin kendisi yazılmaz, yalnızca sayı yazılır (10 piksel değil, 10). Şekilde kırmızı çizgiler çerçeveyi oluşturmak için gerekli alanları vurgulamaktadır.

Bir, iki, üç veya dört değeri boşlukla ayırarak kullanabilirsiniz. Etki, değerlerin sayısına bağlıdır ve tabloda gösterilmektedir.

yuvarlak yuvarlak — iki parametre (sırasıyla yatay ve dikey kenarlıklar için). Üç değerden birini alabilir. Sonuç resimlerde görülebilir.

uzatmak— Kenarlık çizimini öğenin boyutuna kadar uzatır. Bu varsayılan değerdir.
tekrarlamak— Kenarlık desenini tekrarlar.
yuvarlak— Çizimi tekrarlar ve öğe tarafında tamsayı sayıda görüntü olacak şekilde ölçeklendirir.

Tarayıcı Uyumluluğu

Ne yazık ki tüm tarayıcı sürümleri border-image özelliğini desteklememektedir. Daha iyi uyumluluk için özelliğin tüm tarayıcılar için kaydedilmesi önerilir.

Basit kod:

kenar stili: katı; kenarlık genişliği: 27 piksel; -moz-border-image: url (http://mysite.ru/border.png) 27 yuvarlak uzatma; -webkit-border-image: url (http://mysite.ru/border.png) 27 yuvarlak uzatma; -o-border-image: url (http://mysite.ru/border.png) 27 yuvarlak uzatma; border-image: url (http://mysite.ru/border.png) 27 yuvarlak uzatma;

Otomasyon

İnternette kod yazmamıza yardımcı olacak araçlar var. Border-image özelliği için çok uygun bir kurucu var. Kenarlık resminizi oraya yüklemeniz yeterli (bu arada, internette çoğunu bulabilirsiniz). Kaydırıcıları kullanarak resmi alanlara bölün, kenar kalınlığını ve tekrarlama parametrelerini ayarlayın.

Üstelik hemen, çevrimiçi mod sonucu görüyorsunuz (sonunda ne oluyor).

İstediğiniz sonuca ulaştığınızda tek yapmanız gereken, oluşturulan kodu kopyalayıp sayfa koduna (css dosyası) yapıştırmak olacaktır.

Çok basit ve kullanışlı.

Çözüm

Bu, CSS'deki sınır özelliklerine ilişkin tartışmamızı sonlandırıyor. Sana veda etmiyorum. Yakın gelecekte düzen eğitimlerine devam edeceğiz. Güncellemelere abone olun...ve...Görüşürüz!

Birkaç ders önce, bir web sayfası bloğunun şematik temsiline baktık ve ayrıca bir öğenin sınırlarını ayarlamak için kullanılabilen border CSS özelliğinden kısaca bahsettik. Bu sefer örnekler kullanarak bu özelliğe daha detaylı bakacağız.

Kenarlık, kenar boşluğu ile dolgu arasında bulunur. Bu, marjın olduğu anlamına gelir arka sınır. Kenarlık dört tarafa da (sanki bloğu bir çerçeve içine alıyormuş gibi) veya bir, iki veya üç tarafa ayarlanabilir. CSS, kenarlıkların kalınlığını, rengini ve stilini kontrol etmenize olanak tanır. Bunu daha ayrıntılı olarak inceleyelim.

Kenarlık genişliği: kenarlık genişliği

border-width özelliği kenarlığın genişliğini ayarlar. Çoğu zaman bu boyut piksel cinsinden gösterilir. Dört kenarlığın tümü için aynı veya farklı genişlikleri ayarlayabilirsiniz, örneğin:

/* 4 kenarlığın tümü 2 piksel genişliğindedir: */ border-width: 2 piksel; /* üst ve alt kenarlıklar 2 piksel genişliğinde, sol ve sağ 4 pikseldir: */ border-width: 2px 4px; /* üst kenarlık - 2 piksel, sol ve sağ - 6 piksel, alt - 3 piksel: */ border-width: 2px 6px 3px; /* üst kenarlık - 2px, sağ - 3px, alt - 4px, sol - 5px: */ border-width: 2px 3px 4px 5px;

Ayrıca kenar genişliğini belirten anahtar kelimeler de vardır:

• ince - kenarlık 2 piksel genişliğinde;
• orta - kenarlık 4 piksel genişliğinde;
• kalın - kenarlık 6 piksel genişliğinde.

Kenarlık rengi: kenarlık rengi

border-color özelliği kenarlıkların rengini belirtir. Renkler herhangi bir CSS formatında belirtilebilir: anahtar kelimeler, onaltılık veya RGB'de - sizin için neyin daha uygun olduğuna bağlıdır. Önceki özelliğe benzer şekilde, tüm kenarlıklar için tek bir renk ayarlayabilir veya her kenarlık için farklı renkler seçebilirsiniz.

Kenarlık rengi: #FFFF00;

Ayrıca şunu yazarak da şeffaf bir renk ayarlayabilirsiniz:

Kenarlık rengi: şeffaf;

Kenar stili: kenar stili

Kenarlık stili özelliği sayesinde, normal bir kenarlığı noktalı, çift veya üç boyutlu bir kenarlığa dönüştürebilirsiniz. Farklı anlamlar. Bunu yapmak için aşağıdaki anahtar kelimeleri kullanın:

• katı - katı kenarlık;
• noktalı - noktaların sınırı;
• kesikli - noktalı kenarlık;
• çift ​​- çift kenarlık;
• oluk - hacimsel çentik sınırı;
• sırt - kalın kenarlı hacimli bir kenarlık (esasen önceki stilin tersine çevrilmesi);
• başlangıç ​​- kalıptan çekilmiş kenarlık;
• iç metin - girintili bir kenarlık (esasen önceki stilin tersine çevrilmesi).

Border-width ve border-color özelliklerinde olduğu gibi, her blok kenarlığı farklı şekilde stillendirilebilir; örneğin, üst ve alt kenarlıkları kesikli, sağ ve sol kenarlıkları ise çift çizgili yapabilirsiniz. Burada her şey yalnızca hayal gücüne bağlıdır.

Kenarlık stili: çift noktalı;

Not: farklı tarayıcılarda dış görünüş sınırlar biraz farklı olabilir.

Ortak CSS özellik sınırı: 3'ü 1 arada

Bir kenarlığa stil vermek için yukarıdaki özelliklerin üçünü de sırayla kullanmanız gerekmez. Stili çok daha hızlı yazacağınız ve yerden tasarruf edeceğiniz CSS sınırının genel evrensel özelliğini bilmek yeterlidir. Bunu yapmak için, her üç özelliğin değerlerini rastgele sırayla yazın:

Kenarlık: 2 piksel noktalı #FF0000;

Bireysel partiler için sınırlar

Yardımla ek özellikler CSS'de kenarlığı kullanarak her blok kenarlığını ayrı ayrı biçimlendirebilirsiniz. Aşağıdaki özellikler bu konuda size yardımcı olacaktır:

• border-top - üst kenarlığın stili;
• sağ kenarlık - sağ kenarlık için;
• border-bottom - alt kenarlık için;
• kenarlık-sol - sol kenarlık için.

kenarlık üstü: 2 piksel düz #0000FF; kenarlık alt: 7px double #000080;

Sonuçlar

Artık bloklar için nasıl kenarlık oluşturulacağını bildiğinize göre, bunları yapma konusunda pratik yapabilirsiniz. Bir stili, içinde çok fazla çizgi olmadan kısaca tanımlamanın birçok yolu vardır. CSS dosyası. Burada basamaklı stil sayfalarının ilkelerine ilişkin bilgi önemli bir rol oynar. Bir örneğe bakalım.

Diyelim ki bir div için üç düz gri kenarlığa ve kesikli yeşil alt kenarlığa sahip bir kenarlık oluşturmak istiyorsunuz. Bu stili şu şekilde yazabilirsiniz:

Div ( sağ kenarlık: 8 piksel çift #FF0000; sol kenarlık: 8 piksel çift #FF0000; alt kenarlık: 8 piksel çift #FF0000; üst kenarlık: 4 piksel noktalı #FDD201; )

Ama bu çok uzun bir yazı. Bütün bunlar kısaca yazılabilir:

Div ( kenarlık: 8 piksel çift #FF0000; kenarlık üst: 4 piksel noktalı #FDD201; )

Yukarıda bahsettiğimiz gibi burada özellikleri kullanacağız. CSS basamaklı. Önce çerçevenin dört tarafının stilini yazıyoruz ve ardından alt kenarlık için stili ayrı ayrı belirleyerek önceki stilin kısmen üzerine yazıyoruz. Bu satır sırasını takip etmek çok önemlidir.

Mini görev

Div için 200x200 piksel boyutlarında bir kenarlık oluşturmayı deneyin. Çerçevenin stilleri şu şekilde olmalıdır:

• Üst ve alt kenarlıkları sağlam hale getirin sağlam, onlara aynı rengi ve 5 piksellik genişliği verin.
• Sol kenarlığı yap kesikli, 3 piksel genişliğinde, öncekinden farklı bir renk seçin.
• Sağ kenarlığı iki katına çıkarın çift, 7 piksel genişliğinde, önceki ikisinden farklı renkte.

Sonuçta çalışmanız şu şekilde görünmelidir (seçtiğiniz renk hariç):

Görevin sonucu (Chrome'da görüntüleyin)

Bir öğenin kenarlığını kontrol etmek için genel border özelliğini kullanın. Bu özellik, bir öğenin kenarlığının kalınlığını, stilini ve rengini tek bir bildirimde ayarlamanıza olanak tanır.

Bu üç özellik (kenarlık kalınlığı, kenarlık stili ve renk) tek bir bildirimde ayarlanabilir. İşte bir örnek:

Bir öğenin yalnızca bir tarafında kenarlık stili belirleyebilirsiniz. Bunu yapmak için border-top (üst kenarlık), border-right (sağ kenarlık), border-bottom (alt kenarlık), border-left (sol kenarlık) özelliklerini kullanın.

Bu örnekte bloğun her bir tarafı farklı kenar kalınlığına, stiline ve rengine sahiptir.

Nasıl yapılacağını düşün CSS yardımışöyle bir şekil oluşturabilirsiniz:

Kenarlık değerleri - kalınlık, stil ve renk - özel özellikler kullanılarak ayrı ayrı ayarlanabilir.

• kenar stili - kenar stili.
• kenarlık genişliği - kenarlık genişliği.
• kenarlık rengi - kenarlık rengi.

Değerlerin her birini ayrı ayrı ele alalım.

sınır tarzı özellik Sınır stili.

border-style özelliği kenarlığın stilini ayarlar. CSS'de, HTML farklılıkları Bir elemanın sınırı yalnızca katı olamaz. Kenarlık stili için aşağıdaki değerler kabul edilir:

1. yok - kenarlık yok (varsayılan).
2. katı - sağlam kenarlık.
3. çift ​​- çift kenarlık.
4. kesikli - noktalı kenarlık.
5. noktalı - bir dizi noktadan oluşan kenarlık.
6. sırt - "sırt" sınırı.
7. oluk - "oluk" sınırı.
8. ek - depresif kenarlık.
9. başlangıç ​​- kalıptan çekilmiş kenarlık.

Neye benzediklerine dair örnekler.

kenarlık yok (yok)

katı sınır

çift ​​kenarlık

bir dizi noktanın sınırı (noktalı)

kesikli kenarlık

oluk sınırı

sırt sınırı

girintili kenarlık (ek)

ekstrüde kenarlık (başlangıç)

Bu arada mahya çerçevesi için bordür rengini siyah olarak ayarlarsanız bu sonucu elde edersiniz.

Siyah kenarlık ve çıkıntı stiline sahip bir div bloğu.

Çerçeve sağlam görünüyor, ancak bunun nedeni sırt stilinin siyah gölge efekti eklenerek oluşturulması ve siyah efektinin siyah çerçevede görünmemesidir.

Border-style özelliği kullanılarak, kenarlık stili yalnızca bloğun tüm kenarları için ayarlanamaz. Bir kenarlık stili özelliği için birden fazla değer ayarlamak mümkündür; değerlerin sayısına bağlı olarak kenarlık stili atanacaktır; farklı numara bloğun yanları. Bir, iki, üç veya dört değer ayarlayabilirsiniz. Her durum için örneklere bakalım.

Tek değer (katı) - bloğun tüm kenarları için kenarlık stili ayarlanır.

İki değer (katı çift) - ilk değer, üst ve alt tarafların stilini, ikincisi ise yanların stilini belirler.

Üç değer (düz çift noktalı) - ilk değer üst taraf için, ikincisi yanlar için, üçüncüsü alt taraf için.

Dört değer (düz çift noktalı kesikli) - her biri üstten başlayarak saat yönünde bir taraf için değer.

Kenar genişliği özelliği. Kenar kalınlığı.

Bir öğenin kenarlığının genişliğini ayarlamak için border-width özelliğini kullanın. Kenar kalınlığı herhangi bir değere ayarlanabilir mutlak birimlerölçümler, örneğin piksel cinsinden.

Border-style özelliği gibi, özellik de bir ila dört değere ayarlanabilir. Her durum için örneklere bakalım.

Örnek kod:

Border-width özelliğinin anahtar kelime değerleri de bulunmaktadır. Toplamda üç tane var:

• ince - ince kenarlık;
• orta - ortalama kalınlık;
• kalın - kalın kenarlık;

Kenar kalınlığı: ince.

Kenar kalınlığı: orta.

Kenar kalınlığı: kalın.

Border-color özelliği. Sınır rengi.

Kenarlık rengini kontrol etmek için kenarlık rengi aracını kullanın. Bu özelliğin renkleri "CSS'deki Renkler" makalesinde açıklanan herhangi bir yöntem kullanılarak ayarlanabilir:

• Rengin onaltılık gösterimi (#ff00aa).
• RGB formatı- rgb(255,12,110) . RGBA formatı CSS3 için.
• HSL formatları ve CSS3 için HSLA.
• Rengin adı, örneğin siyah. Tam liste Renk adları CSS renk adları tablosunda verilmiştir.

Border-color özelliği de birden dörde kadar değere sahip olabilir ve bunları önceki özelliklere benzer şekilde ele alır.

Bir değer (kırmızı).

İki değer (kırmızı siyah).

Üç değer (kırmızı siyah sarı).

Dört değer (kırmızı siyah sarı mavi).

Şimdi yukarıda belirttiğimiz soruna dönelim ve bir şekil çizelim:

İşte böyle bir şekli çizen kod, yalnızca boyutu daha büyük:

Taraflar için değerleri ayrı ayrı ayarlama

Yukarıda bir bloğun yalnızca bir tarafı için kenarlık özelliği değerleri belirtebileceğinizden bahsetmiştik. Bu amaçlara yönelik özellikler vardır:

• kenarlık üstü (üst kenarlık)
• sınır sağ
• kenarlık-alt
• kenarlık-sol (sol kenarlık)

Tüm özellikler için herhangi bir sırayla üç değerin (kalınlık, stil ve renk) belirtildiğini hatırlatmama izin verin. Ancak her iki taraf için kalınlığı, rengi ve stili ayrı ayrı ayarlamanıza olanak tanıyan özellikler vardır. Bu özelliklerin yazımı yukarıdakilerden türetilmiştir.

Üst kenarlık seçenekleri (kenarlık üstü).

• border-top-color - öğenin üst kenarlığının rengini ayarlar.
• border-top-width - öğenin üst kenarlığının kalınlığını ayarlar.
• border-top-style - öğenin üst kenarlığının stilini ayarlar.

Sağ kenarlık seçenekleri (kenarlık-sağ).

• border-right-color - öğenin sağ kenarlığının rengini ayarlar.
• border-right-width - öğenin sağ kenarlığının kalınlığını ayarlar.
• border-right-style - öğenin sağ kenarlığının stilini ayarlar.

Alt kenarlık seçenekleri (kenarlık-alt).

• border-bottom-color - öğenin alt kenarlığının rengini ayarlar.
• border-bottom-width - öğenin alt kenarlığının kalınlığını ayarlar.
• border-bottom-style - öğenin alt kenarlığının stilini ayarlar.

Sol kenarlık seçenekleri (kenarlık-sol).

• border-left-color - öğenin sol kenarlığının rengini ayarlar.
• border-left-width - öğenin sol kenarlığının kalınlığını ayarlar.
• border-left-style - öğenin sol kenarlığının stilini ayarlar.

Bu özelliklerin kullanımına bir örnek:

Sınır yarıçapı özelliği. Kenar köşelerinin yuvarlanması.

border-radius özelliği, bir öğenin sınırlarının köşelerini yuvarlatmayı amaçlamaktadır. Bu özellik CSS3'te göründü ve tümünde doğru şekilde çalışıyor modern tarayıcılar, arka İnternet hariç Explorer 8 (ve daha eski sürümler).

Değerler CSS'de kullanılan herhangi bir sayı olabilir.

Kenarlık yarıçapı özelliği: 15 piksel.

Blok çerçevesi belirtilmezse, fileto arka planda oluşur. Burada kenarlıksız ancak arka plan rengi olan yuvarlak bir blok örneği verilmiştir:

Kenarlık yarıçapı özelliği: 15 piksel.

Bir elemanın her bir köşesini yuvarlamak için özellikler vardır. Bu örnekte bunların tümü kullanılmaktadır:

Kenarlığın sol üst yarıçapı: 15 piksel; kenarlığın sağ üst yarıçapı: 0; kenar-alt-sağ-yarıçap: 15px; kenarlık-sol-alt-yarıçap: 0;

Kenarlık yarıçapı özelliği: 15 piksel.

Bu kod tek bir bildirimde yazılabilmesine rağmen: border-radius : 15px 0 15px 0 . Gerçek şu ki border-radius özelliği bir ila dört değer arasında ayarlanabilir. Aşağıdaki tabloda bu tür duyurulara ilişkin kurallar özetlenmektedir.

Bu tabloyu dikkatlice inceledikten sonra en çok şunu anlayabilirsiniz: Kısa not istenilen stilşöyle olacak: border-radius : 15px 0 . Sadece iki anlamı var.

Biraz pratik

CSS kullanarak limon çizmek.

İşte böyle bir bloğun kodu:

Marj: 0 otomatik; /* Bloğu ortalayın */ width: 200px; yükseklik: 200 piksel; arka plan: #F5F240; kenarlık: 1 piksel düz #F0D900; sınır yarıçapı: 10 piksel 150 piksel 30 piksel 150 piksel;

Şekli zaten çizmiştik:

Şimdi ondan bir üçgen bırakalım:

Üçgen kodu:

Marj: 0 otomatik; /* Bloğu ortaya yerleştirin */ padding: 0px; genişlik: 0 piksel; yükseklik: 0; kenarlık: 30 piksel düz beyaz; kenarlık alt rengi: kırmızı;