CSS - Border

Boxdim

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>

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>

Boxdim

Round (Radius)

.roundedBorderBox {
    width: 40px; 
    height: 40px; 
    border: 2px solid blue;
    border-radius: 10px;
}
<p class="roundedBorderBox"></p>

Documentation / Reference





Discover More
Arrow

CSS A carret/ is made in CSS with the help of the border corner. The following ingredients are needed: a block box with a height and width of null and transparent border The width of the border...
Css Padding
CSS - Padding

The padding area is the space between the content of the box and its border. In the below image, this are the areas: TP (top padding) BP (bottom padding) LP (left padding) RB (right padding)...
Boxdim
CSS - Background (Image)

The background of an element is the total size of the element: including padding and border but not the margin. The margin is transparent. When two element overlap, you can send one element to...
Firebug Box Sizing
CSS - Box sizing (property and definition)

The box-sizing property is used to alter the default box model used to calculate widths and heights of elements. The width and height are defined as the width and height: of the or of the depending...
Boxdim
CSS - Boxes (Box Model)

CSS The Box model means that each element is represented as a rectangular box. The layout phase of the browser rendering engine creates the box model as a tree of box and determines: the , the...
Boxdim
CSS - Content (Property)

The content CSS property is used with: the ::before and ::after pseudo-elements to generate content respectively: before or after the content of an element. Visually, the content is located at...
Boxdim
CSS - Edge of a box

What is the edge of a box
Css Box Size Content
CSS - Height of a box

This page is the height of a box. From How it's calculated To How it's defined HTMLheight attributeHTMLimage...div element When a absolute length value is set, the value applied directly...
CSS - Shorthand property

CSS A shorthand is a css property that permits to write several css property into one property value. For instance, the border property is a shorthand property. The below border property value is...
Boxdim
CSS - Spacing (Box Dimension)

spacing in CSS is not a specific term but refers generally to the setting of the following of a box properties: - the padding set how far from the border the text should be and is an area taken into...



Share this page:
Follow us:
Task Runner