HTML・CSS Writing 2022

border --Set border --Introduction to CSS [CSS3 compatible]

To set the border, specify border in the style sheet (CSS). For border, specify the border thickness, border type, and color separated by a blank.

<div style = "border: 1px solid #ddd;">
  border
</div>

solid is the type of border that represents a single line.

For the type of border, refer to the HTML quick reference.

border-style --Specify the border style --HTML quick reference

Set the padding properly inside the border

Let's set the padding properly inside the border.

Specify the position of the border

You can use "border-top", "border-bottom", "border-left", and "border-right" to set a border on only one side.

<div style = "border-top: 1px solid blue; margin-bottom: 10px; background: #eee;">
  On the border
</div>

<div style = "border-bottom: 1px solid blue; margin-bottom: 10px; background: #eee;">
  Below the border
</div>

<div style = "border-left: 1px solid blue; margin-bottom: 10px; background: #eee;">
  Border left
</div>

<div style = "border-right: 1px solid blue; margin-bottom: 10px; background: #eee;">
  Border right
</div>

You can also combine them.

<div style = "border-top: 1px solid blue; border-bottom: 1px solid blue; margin-bottom: 10px; background: #eee;">
  Border top and bottom
</div>