ホームへ

CSSのborderの太さ・長さを変える方法

「borderの太さや長さ変えるにはどうするんだろう?」

というあなたへ、CSSのborderの太さ・長さを変える方法を解説します。

borderの太さを変える:border-width

borderの太さはborder-widthで指定します。

border-width: 10px
<style>
.example{
    border: 1px solid #333;
    border-width: 10px;
    padding: 5px;
}
</style>
<div class="example"> border-width: 10px</div>

border-widthは特定の線の太さを指定することができます。

border-width:上 右 下 左

border-width: 15px 5px 1px 0
<style>
.example2{
    border: 1px solid #333;
    border-width: 15px 5px 1px 0;
    padding: 5px;
}
</style>
<div class="example2"> border-width: 15px 5px 1px 0</div>

border-width:上下 左右

border-width: 5px 20px
<style>
.example3{
    border: 1px solid #333;
    border-width: 5px 20px;
    padding: 5px;
}
</style>
<div class="example3"> border-width: 5px 20px</div>

border-width:上 左右 下

border-width: 5px 20px 1px
<style>
.example4{
    border: 1px solid #333;
    border-width: 5px 20px 1px;
    padding: 5px;
}
</style>
<div class="example4"> border-width: 5px 20px 1px</div>

「border」では1行で太さ、デザイン、色を指定できます。

border:太さ デザイン 色

border: 10px solid #333
<style>
.example5{
    border: 10px solid #333;
    padding: 5px;
}
</style>
<div class="example5"> border: 10px solid #333</div>

borderについて詳しくはこちら↓

borderの長さを変える:width

borderの長さはその要素のwidthまたはheightと同じです。

横線ならwidth、縦線ならheightです。

長さを変えたいならwidthやheightやpaddingを指定しましょう。

横線(width: 200px)

<style>
.yokosen{
    border: 1px solid #333;
    width: 200px;
}
</style>
<div class="yokosen"></div>

縦線(height: 200px)

<style>
.tatesen{
    border: 1px solid #333;
    width: 0px;
    height: 200px;
}
</style>
<div class="tatesen"></div>

まとめ

borderの太さはborder-widthを指定。

borderの長さはその要素のwidthまたはheightを指定。

以上、CSSのborderの太さ・長さを変える方法でした。

マンガで読める関連記事