HTML border

Genel
21-03-2024 19:30
HTML border

Author

  • Alberto Para
  • May 5, 2014

Made with

  • HTML / CSS (SCSS)

Using Internal CSSIf we need to feature the border in Html the use of Internal CSS, then we ought to comply with the stairs that are given below. Using those steps, any consumer can effortlessly create the border.Step 1: Firstly, we ought to kind the Html code in any textual content editor or open the present Html report withinside the textual content editor wherein we need to apply the Internal CSS for including the border.



Example

[style.css]

p{
  width: 300px;
  height: 100px;
}
p#dot{ border-style: dotted; }
p#sol{ border-style: solid; }

[index.html]

This is a paragraph(dotted)


This is a paragraph(solid)

Compare all Border styles in HTML and CSS

Description

The following code shows how to compare all Border styles.

Example



<html>
<head>
<style rel="stylesheet" type="text/css">
p {
border-color: #000000;
}

.none {
border-style: none;
}

.solid {
border-style: solid;
}

.dotted {
border-style: dotted;
}

.dashed {
border-style: dashed;
}

.double {
border-style: double;
}

.groove {
border-style: groove;
}

.ridge {
border-style: ridge;
}

.inset {
border-style: inset;
}

.outset {
border-style: outset;
}

.hidden {
border-style: hidden;
}



<body>
<p class="none">This paragraph has a border-style property set to none.

<p class="solid">This paragraph has a border-style property set to solid.

<p class="dotted">This paragraph has a border-style property set to dotted.

<p class="dashed">This paragraph has a border-style property set to dashed.

<p class="double">This paragraph has a border-style property set to double.

<p class="groove">This paragraph has a border-style property set to groove.

<p class="ridge">This paragraph has a border-style property set to ridge.

<p class="inset">This paragraph has a border-style property set to inset.

<p class="outset">This paragraph has a border-style property set to outset.

<p class="hidden">This paragraph has a border-style property set to hidden.

Click to view the demo

The code above generates the following result.

html border-style

Example

Set a style for the border:div {border-style: dotted;}Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

The border-style property sets the style of an element’s four borders. This property can have from one to four values.

Examples:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style: dotted;
    • all four borders are dotted

HTML border-radius

Example

Add rounded corners to two

elements:#example1 {
  border: 2px solid red;
  border-radius: 25px;
}

#example2 {
  border: 2px solid red;
  border-radius: 50px 20px;
}

HTML border ekleme

CSS Kenarlıklar (Border)

Bir HTML elementinin kenarlarına çizgi çekerken kullanacağımız kodlar şunlardır:

Ayrıca bunlarla birlikte şu konularda da bilgi vereceğiz:

 

border-style: Kenarlık Stili

Kenarların görünüşünün nasıl olacağı ile ilgili bilgi vermemizi sağlar.

Kullanabileceğiniz stiller:

none – Kenarlık yokdotted – Noktalıdashed – Kesik çizgilisolid – Çizgidouble – Çift çizgigrooveridgeinsetoutset
Örnek bir kullanım:

 CSS Kodu

.kutum { border-style: dotted; }

 

border-width: Kenarlık Boyutu

Kenar genişliğini belirtmemizi sağlar. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Örnek bir kullanım:

 CSS Kodu

   .kutum { border-style: solid; border-width: 1px; }

 

border-color: Kenarlık Rengi

Kenarlık rengini bu komutla değiştirebiliriz. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Renk kullanımı hakkında bilgi için buraya tıklayın.

Örnek bir kullanım:

 CSS Kodu

   .kutum {
      border-style: solid;
      border-width: 1px;
      border-color: #0000CC;
   }

 

Kenarları Ayrı Ayrı Şekillendirmek

İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendirebiliriz.

  • border-left-style – Sol kenarın şekli.
  • border-right-style – Sağ kenarın şekli.
  • border-top-style – Üst kenarın şekli.
  • border-bottom-style – Alt kenarın şekli.

Ayrıca border-style dört kenarın değerini de alacak şekilde yazılabilir. Örneğin:

border-style: dotted solid double dashed;

Üst kenar – dotted,
Sağ kenar – solid,
Alt kenar – double,
Sol kenar – dashed.

Farkettiyseniz border-style yazdıktan sonra sırasıyla saat yönünde kenarları ayrı ayrı belirttik.

border-style: dotted solid double;

Üst kenar – dotted,
Sağ ve Sol kenar – solid,
Alt kenar – double,

Bu kullanımda 4. kenarı yazmadık. Bu kenar solu işaret ettiği için tam tersi olan Sağ taraftaki özelliği alacaktır.

border-style: dotted solid;

Üst kenar ve alt kenar – dotted,
Sağ ve Sol kenar – solid,
Bu kullanımda Yukarı – Aşağı kenarlar ilk yazılan dotted, Sol ve Sağ kenarlar ikinci yazılan solid biçiminde olacaktır.

 

Kenar Belirtmenin Kısa Yolu

Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün. Örneğe bakalım:

 CSS Kodu

   .kutum {
      border: 1px #0000CC solid;
   }

Buradaki örnekte yer alan üç kodu tek bir kodda birleştirdik. Sırasıyla önce border-width değerini yazdık, sonra border-color ve en son border-style ile üç özelliği birlikte kullandık.

Bu kısayolu da kenarlara ayrı ayrı uygulamanız mümkün. Bu komutlar:

  • border-left – Sol kenar
  • border-right – Sağ kenar
  • border-top – Üst kenar
  • border-bottom – Alt kenar

Html border nedir

Border özelliği tablo hücrelerinde ve kenarlarında kenarlık görünüp görünmeyeceğini belirtir. 1 değeri kenarlıkların görüntülenmesi gerektiğini belirtir. (Tablo biçimlendirme amacıyla kullanılmamalıdır.)

HTML border kullanımı

Tüm Bloglar
IdeaSoft® | E-Ticaret paketleri ile hazırlanmıştır.