ویژگی border-style در CSS

border-style Property

ویژگی border-style در CSS استایل یا سبک ظاهری حاشیه (border) را در چهار جهت عنصر مشخص می کند.

نحوه نوشتار

/* مقادیر با کلید واژه */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* افقی | عمودی */
border-style: dotted solid;

/* پایین | عمودی | بالا */
border-style: dotted double dashed;

/* چپ | پایین | راست | بالا */
border-style: none solid dotted dashed; 

مقادیر

مقادیر برای این ویژگی تماما از نوع کلیدواژه است که عبارتند از:

• none
• hidden
• dotted
• dashed
• double
• groove
• ridge
• inset
• outset

ویژگی border-style می تواند یک تا چهار مقدار را بپذیرد.

• اگر یک مقدار مشخص شود، این مقدار برای هر چهار طرف اعمال می شود.
• اگر دو مقدار مشخص شود، اولی برای ضلعهای بالا و پایین و دومی برای ضلعهای راست و چپ اعمال می شوند.
• اگر سه مقدار مشخص شود، اولی ضلع بالا، دومی برای اضلاع راست و چپ و سومی برای ضلع پایین اعمال می شوند.
• اگر چهار مقدار مشخص شود، به ترتیب برای اضلاع بالا، راست، پایین و چپ اعمال خواهد شد.

در مثال زیر نحوه عملکرد این ویژگی را همراه با مقادیر مختلف میبینیم:

html

<div class="b1">none</div>
<div class="b2">hidden</div>
<div class="b3">dotted</div>
<div class="b4">dashed</div>
<div class="b5">solid</div>
<div class="b6">double</div>
<div class="b7">groove</div>
<div class="b8">ridge</div>
<div class="b9">inset</div>
<div class="b10">outset</div>

css

body {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    font-family: monospace;
}
div {
    border-width: 6px;
    background-color: lightgreen;
    padding: 20px;
    margin: 10px;
    display: inline-block;
    width: 20%;
    text-align: center;
}
.b1 {
    border-style: none; 
}
.b2 {
    border-style: hidden; 
}
.b3 {
    border-style: dotted; 
}
.b4 {
    border-style: dashed; 
}
.b5 {
    border-style: solid; 
}
.b6 {
    border-style: double; 
}
.b7 {
    border-style: groove; 
}
.b8 {
    border-style: ridge; 
}
.b9 {
    border-style: inset; 
}
.b10 {
    border-style: outset; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.