Table of Contents

About

This page shows you how to define the border of a box

Why do I still see a line with a disabled border

You may see the outline:

  • The outline is the outermost delimitation line of the margin area (applied by default when the element is on focus).
  • The border is the delimitation line between the padding and the margin area

Properties

Dimension and color

Shorthand

CSS - Shorthand property 

h1 {
   border: 1px solid aqua;
}

where: 

<h1>My First Header with a border</h1>
Rendered by WebCode

Longhand

Can be applied to an image. 

.coloredBorderBox {
	width: 20px; 
	height: 20px; 
	border-left: 4px solid aqua;
	border-right: 4px solid red;
	border-bottom: 4px solid black;
	border-top: 4px solid blue;
}

<p class="coloredBorderBox "></p>
Rendered by WebCode

Boxdim

Round (Radius)

.roundedBorderBox {
    width: 40px; 
    height: 40px; 
    border: 2px solid blue;
    border-radius: 10px;
}

<p class="roundedBorderBox"></p>
Rendered by WebCode

Documentation / Reference