CSS Border Sides

فهرست مطالب

CSS Border - Individual Sides

ﺩﺭﺍﺩ ﺩﻮﺟﻭ a ﻦﯿﯿﻌﺗ ﻥﺎﮑﻣﺍ ﻪﮐ ﺪﯾﺩﺮﮐ ﻩﺪﻫﺎﺸﻣ ﻞﺒﻗ ﺕﺎﺤﻔﺻ ﯼﺎﻫ ﻝﺎﺜﻣ ﺯﺍ

،ﻻﺎﺑ) ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﺎﻫﺯﺮﻣ ﺯﺍ ﮏﯾ ﺮﻫ ﻦﯿﯿﻌﺗ ﯼﺍﺮﺑ ﯽﯾﺎﻫ ﯽﮔﮋﯾﻭ ﺰﯿﻧ CSS ﺭﺩ

ﻝﺎﺜﻣ

p
{
   
border-top-style: dotted;
   
border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

:ﻪﺠﯿﺘﻧ

Different Border Styles

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

:ﺪﻫﺩ ﯽﻣ ﺖﺳﺩ ﻪﺑ ﺍﺭ ﻪﺠﯿﺘﻧ ﻥﺎﻤﻫ ﻻﺎﺑ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

p {	border-style: dotted solid;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>

</body>
</html>

:ﺪﻨﮐ ﯽﻣ ﺭﺎﮐ ﻪﻧﻮﮕﭼ ﺎﺠﻨﯾﺍ ﺭﺩ ،ﻦﯾﺍﺮﺑﺎﻨﺑ

:ﺪﺷﺎﺑ ﺭﺍﺪﻘﻣ ﺭﺎﻬﭼ ﯼﺍﺭﺍﺩ class="w3-codespan">border-st

ﻪﻄﻘﻧ :ﻪﯿﺷﺎﺣ ﮏﺒﺳﻪﻨﯿﭼ ﻭﺩ ﺮﭘﻮﺗ ﺭﺍﺩ.
- ﺖﺳﺍ ﻦﯿﭼ ﻪﻄﻘﻧ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ
- ﺖﺳﺍ ﺪﻣﺎﺟ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ
- ﺖﺳﺍ ﺮﺑﺍﺮﺑ ﻭﺩ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ
- ﺖﺳﺍ ﻩﺩﺭﻮﺧ ﻦﯿﭼ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ

:ﺪﺷﺎﺑ ﺭﺍﺪﻘﻣ ﻪﺳ ﯼﺍﺭﺍﺩ class="w3-codespan">border-styl

ﻪﻄﻘﻧ ﻪﭼﺭﺎﭙﮑﯾ ﯽﯾﺎﺗﻭﺩ :ﻪﯿﺷﺎﺣ ﮏﺒﺳ؛ﺭﺍﺩ
- ﺖﺳﺍ ﻦﯿﭼ ﻪﻄﻘﻧ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ
- ﺪﻨﺘﺴﻫ ﺪﻣﺎﺟ ﭗﭼ ﻭ ﺖﺳﺍﺭ ﯼﺎﻫﺯﺮﻣ
- ﺖﺳﺍ ﺮﺑﺍﺮﺑ ﻭﺩ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ

:ﺪﺷﺎﺑ ﺭﺍﺪﻘﻣ ﻭﺩ ﯼﺍﺭﺍﺩ class="w3-codespan">border-styl

ﻪﻄﻘﻧ ﺪﻣﺎﺟ :ﻪﯿﺷﺎﺣ ﮏﺒﺳ؛ﺭﺍﺩ
- ﺪﻨﺘﺴﻫ ﻦﯿﭼ ﻪﻄﻘﻧ ﻦﯿﯾﺎﭘ ﻭ ﻻﺎﺑ ﯼﺎﻫ ﻪﯿﺷﺎﺣ
- ﺪﻨﺘﺴﻫ ﺪﻣﺎﺟ ﭗﭼ ﻭ ﺖﺳﺍﺭ ﯼﺎﻫﺯﺮﻣ

:ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺭﺍﺪﻘﻣ ﮏﯾ class="w3-codespan">border-styl

ﻪﻄﻘﻧ :ﻪﯿﺷﺎﺣ ﮏﺒﺳ؛ﺭﺍﺩ
- ﺪﻨﺘﺴﻫ ﻦﯿﭼ ﻪﻄﻘﻧ ﻪﯿﺷﺎﺣ ﺭﺎﻬﭼ ﺮﻫ

`ﻝﺎﺜﻣ`

 /* Four values */
p {
  border-style: dotted solid double dashed; 
}
/* Three 
  values */
p {
  border-style: dotted solid double; 
}
  
/* Two values */
p {
  border-style: dotted solid; 
}
/* One value */
p {
  border-style: dotted; 
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>

ﺪﻨﮐ ﯽﻣ ﺭﺎﮐ ﺰﯿﻧ ﻥﺁ ﺎﺑ ،ﻝﺎﺣ ﻦﯾﺍ ﺎﺑ .ﺖﺳﺍ ﻩﺪﺷ ﻩﺩﺎﻔﺘﺳﺍ ﻻﺎﺑ ﻝﺎﺜﻣ ﺭﺩ


    
      ← صفحه قبلی
    
    
      صفحه بعد →