CSS borderの使い方

css borderの使い方
まとめ

css borderの使い方

cssでborderでデザインする方法を説明します。

borderの実線

<h1>ボーダー</h1>

h1 {
  border: 2px solid #000000;
}

borderの点線

   h1 {
    border: 2px dotted #000000;
    padding: 15px;
  }

borderの上下に破線

 h1 {
    border-top: 3px dashed red;
  border-bottom: 3px dashed red;
  padding: 10px;
  }

borderの角に丸みをつける

h1 {
    border: 2px solid blue;
    border-radius: 10px;
    padding: 20px;
  }

ボーダーにグラデーションをつける

  h1 {
    border: 10px solid;
    border-image: linear-gradient(45deg, red, blue) 1;
    padding: 15px;
  }

２色のボーダーライン

  h1 {
    font-size: 2.5em;
    color: #333;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%);
}

2色のボーダーライン⑵


h1 {
    font-size: 2.5em;
    color: #333;
    display: inline-block;
    padding-bottom: 10px;
    position: relative;
    
}


h1::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: blue;
}


h1::after {
  
    content: '';
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 200%; 
    height: 4px;
    background-color: red;
}