CSS Rounded Borders

فهرست مطالب

CSS Rounded Borders

:ﺩﻮﺷﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺩﺮﮔ ﯼﺎﻫﺯﺮﻣ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ Normal border

Round border
Rounder border
Roundest border
                                                                          ﻝﺎﺜﻣ
p {
  border: 2px solid red;
  border-radius: 5px;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
  padding: 5px;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
  padding: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
  padding: 5px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
  padding: 5px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

</body>
</html>


                                                               ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ
                                       ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﺮﺗﺮﺑ ﻪﯿﺷﺎﺣ ﯼﺎﻫﯽﮔﮋﯾﻭ ﻪﻤﻫ
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-top: thick double #ff0000;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

</body>
</html>
.ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ ﯼﺍﺮﺑ ﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋ
                                              ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ ﻞﯾﺎﺘﺳﺍ
<!DOCTYPE html>
<html>
<head>
<style>
p {border-style: solid;}
p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}
</style>
</head>
<body>

<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>

</body>
</html>
                        .ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ ﻞﯾﺎﺘﺳﺍ ﻢﯿﻈﻨﺗ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ
                                                ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﺽﺮﻋ
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-left-width: 15px;
}
</style>
</head>
<body>

<p><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>
                          .ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﺽﺮﻋ ﻢﯿﻈﻨﺗ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ
                                                  ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﻪﯿﺷﺎﺣ ﺭﺎﻬﭼ ﮓﻧﺭ
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: #0000ff;
}

p.two {
  border-style: solid;
  border-color: #ff0000 #0000ff;
}

p.three {
  border-style: solid;
  border-color: #ff0000 #00ff00 #0000ff;
}

p.four {
  border-style: solid;
  border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>

<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>
.ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﮓﻧﺭ ﺭﺎﻬﭼ ﺎﺗ ﮏﯾ ﺯﺍ ﺪﻧﺍﻮﺗ ﯽﻣ .ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻪﯿﺷﺎﺣ ﺭﺎﻬﭼ ﮓﻧﺭ ﻢﯿﻈﻨﺗ ﻩﻮ
                                              ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﮓﻧﺭ
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-right-color: #ff0000;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

</body>
</html>
                        .ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﮓﻧﺭ ﻢﯿﻈﻨﺗ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ
                                                         CSS ﯼﺯﺮﻣ ﺕﺎﯿﺻﻮﺼﺧ ﻡﺎﻤﺗ
border
                               ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﺍﺭ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ
border-bottom
                         ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﺍﺭ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ
border-bottom-color
                                               ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ ﮓﻧﺭ
border-bottom-style
                                               ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ ﮏﺒﺳ
border-bottom-width
                                               ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ ﺽﺮﻋ
border-color
                                                ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﻪﯿﺷﺎﺣ ﺭﺎﻬﭼ ﮓﻧﺭ
border-left
                        ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ
border-left-color
                                              ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﮓﻧﺭ
border-left-style
                                           ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﻞﯾﺎﺘﺳﺍ
border-left-width
                                              ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﺽﺮﻋ
border-radius
                ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺩﺮﮔ ﯼﺎﻫ ﻪﺷﻮﮔ ﯼﺍﺮﺑ ﺍﺭ ﺱﻮﯾﺩﺍﺭ-*-ﻪﯿﺷﺎﺣ ﯽﮔﮋﯾﻭ ﺭﺎﻬﭼ ﺮﻫ
border-right
                         ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﺍﺭ ﺐﺳﺎﻨﻣ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ
border-right-color
                                            ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﮓﻧﺭ
border-right-style
                                            ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﮏﺒﺳ
border-right-width
                                            ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﺽﺮﻋ
border-style
                                             ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﻪﯿﺷﺎﺣ ﺭﺎﻬﭼ ﻞﯾﺎﺘﺳﺍ
border-top
                         ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻥﻼﻋﺍ ﮏﯾ ﺭﺩ ﺍﺭ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ
border-top-color
                                               ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ ﮓﻧﺭ
border-top-style
                                               ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ ﮏﺒﺳ
border-top-width
                                               ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ ﺽﺮﻋ
border-width
                                                ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﻪﯿﺷﺎﺣ ﺭﺎﻬﭼ ﺽﺮﻋ

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