Borders in CSS

Borders in CSS are used to create a visible outline around an element. We can apply borders to 

elements using border property or its individual longhand properties such as border-width, border-

style and border-color. Here’s an overview of how you can use borders in CSS.

1. Border:

This property allows you to set width, style and color of a border in one declaration. It 

follows the order as follows border-width, border-style and border-color.

Ex:

.element{

border: 1px solid blue;

}

2. Border-width:

This property sets the width of border. You can specify it in pixels, percentages.

Ex:

.element{

border-width: 2px;

}

3. Border-style:

This property sets the style of borders such as solid, dashed, dotted, double etc.

Ex:

.element{

border-style: dotted;

}

4. Border-color:

This property sets color of border. You can use color names, HEX codes, RGB, RGBA 

values.

Ex:

.element{

border-color: rgb(150, 50, 55);

}

5. Border-radius:

This property rounds the corners of an element’s border. You can specify the radius for 

each corner individually or use a single value to apply the same radius to all corners.

Ex:

.element{

border-radius: 5px;

}

6. Border-top, border-right, border-bottom, border-left:

These properties allow you to specify individual borders for each side of an element. You 

can use these properties to apply different styles, widths and colors to each side separately.

Ex:

.element{

border-top: 2px solid #000;

border-right: 1px dashed Blue;

border-bottom: 3px double #666;

border-left: 1px dotted #999;

}

Box-Model:

The CSS box model is fundamental concept in web design and layout. It defines how elements are structured and how their size and spacing are calculated.

1. Content:

The content area is where the actual content (text, image, etc) of the element is displayed.

This is innermost part of the box. The size of content box can be controlled using width

and height properties.

2. Padding:

It is space between content and border. Padding creates internal space within an element to prevent content from touching the border. Padding can be specified on all four sides (top, right, bottom, left) using individual properties.

• padding-top, padding-right, padding-left, padding-bottom

• Shorthand:

Padding: 10px 15px 20px 25px;

 T R B L

• If only one value is specified, it applies to all four sides.

• If two values are specified, first value goes to top and bottom, second value goes to

left and right.

padding: 10px 20px;

3. Borders:

The space between margin and padding is border. The border surrounds padding (if

specified) and content area. It can be styled using border properties.

4. Margin:

The margin is space outside of border. Margin create space between an element and its surrounding elements. Like padding, margin can be defined for each side.

• Margin-top, margin-right, margin-bottom, margin-left:

• Shorthand:

Margin: 10px 20px 30px 40px;

• Margin is transparent and does not affect the background color or border.

5. Width and Height:

• The width and height properties define size of content area.

• The total size of element is calculated by adding content’s size, padding, border and

margin (if present).

Ex:

Total width of box will be calculated as

Total-width = content-width + Left-padding + Right-Padding + Left-border +

Right-border + Left-margin + Right-margin.

6. Box-sizing:

The box-sizing property controls how the width and height of element are calculated.

1. Content-box: This is default value. The width and height only include the content area and padding, border, and margin are added to total size.

2. Border-box: The width and height include padding and borders. This makes it easier to

manage size of elements as the padding and border are included within elements

specified width and height.

Ex:

<div class=”box”>

This is box

</div>

<style>

.box{

Width: 20px;

Height: 100 px;

Padding: 20px;

Border: 5px solid black;

Margin: 10px;

Box-sizing: border-box;

}

</style>

Positioning in CSS:

In CSS positioning refer to technique of pacing elements on a web page in specific location relative to their containing element or to browser window itself.

1. Static Positioning (default):

This is default positioning for all elements. Elements with static positioning are positioned according to the normal flow of document. It cannot be moved by top, right, bottom or left.

Ex:

div{

position: static;

}

2. Relative Positioning:

When you set an elements position to relative, it is positioned relative to its normal position in document flow. The element can be moved using top, right, bottom, and left properties.

Ex:

div{

position: relative;

top: 20px;

left: 15px;

}

3. Absolute Positioning:

With absolute positioning, an element is removed from normal document flow and position relative its closet positioned parent (or to initial containing block, if no positioned parent(ancestor) is found.).

You can use top, right, bottom and left properties to specify exact position of element relative to its containing block.

Ex:

div{

position: absolute;

top: 10px;

left: 100px;

}

4. Fixed Positioning:

Fixed positioning position an element relative to browser window regardless of scrolling. This means that the element remains in the same position even when user scrolls the page.

Ex:

div{

position: fixed;

top: 0;

right: 0;

}

5. Z – index:

This property controls the stacking order of positioned elements. An element with a higher

z-index will appear in front of elements with lower z-index. Z- index only works on

elements that are positioned (relative, absolute, fixed).

Ex:

div{

position: relative;

z-index: 10;

}