Daire ve Çizgi Stilleri özelliği, web sayfalarında kullanılan HTML etiketleri için daireler, kareler, çizgiler gibi şekiller oluşturmak için kullanılır. Bu özellik sayesinde, sayfa tasarımlarına daha fazla estetik katılabilir.
Border-radius özelliği, elementin köşelerini yuvarlar ve daire veya oval şekilli elementler oluşturur. Border-style özelliği, elementin kenarlık stilini belirler. Border-width özelliği, elementin kenarlık kalınlığını ayarlar. Border-color özelliği, elementin kenarlık rengini ayarlar.
Aşağıdaki kod blokları, Daire ve Çizgi Stilleri özelliği için bazı örnekler içermektedir:
<div class="border-example">
<h1>Bu bir başlık etiketidir</h1>
<p>Bu bir paragraf etiketidir.</p>
</div>
<div class="circle-example">
<h2>Bu bir yuvarlak etiketidir</h2>
<p>Bu da başka bir paragraf etiketidir.</p>
</div>
.border-example {
border-style: solid;
border-width: 2px;
border-color: #333;
}
.circle-example {
border-radius: 50%;
background-color: #333;
color: white;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
Yukarıdaki kod bloklarında, her bir HTML etiketi için farklı CSS stiller tanımlanmıştır. Border-style özelliği (border-style) ile elementin kenarlık stilini belirlerken, border-width özelliği (border-width) ile elementin kenarlık kalınlığını ayarlanmıştır. Border-color özelliği (border-color), elementin kenarlık rengini belirlemektedir.
Border-radius özelliği (circle-example) ile yuvarlak şekilli bir element oluşturulmuştur. Background-color özelliği (background-color) ile arka plan rengi belirlenmiş, color özelliği (color) ile yazı rengi beyaz yapılmış ve height-width özellikleri ile genişlik ve yükseklik ayarlanmıştır. Display özelliği (display) ile div etiketinin içindeki diğer elementlerin hizalanması sağlanmıştır.
Ayrıca, CSS3’te stroke gibi farklı çizgi stilleri de kullanılabilir. Bu çizgi stilleri sayesinde elementin kenarlık değil, içeriğinin belli bir kısmının çizgiyle belirtilmesi sağlanabilir.
