ankitweblogic logo
W e b t u t o r i a l s

Define CSS

CSS Comment

CSS Selectors

Types of CSS

CSS Color Property

CSS Font Property

CSS Background

CSS Box Model

CSS3 Border Radius

Styling HTML Table

Styling Links

CSS Menu

CSS Display and Visibility

CSS Overflow Property

CSS Position, Z-index

CSS Outline, Offset

CSS Cursor Property

CSS3 box-sizing

CSS Web Layout

CSS Website

Google Fonts

Google Map

Login Form

Google Page

Facebook Page

CSS Assignment List

CSS Box Model

Every element that can be displayed is considered as box. In CSS, the term 'box model' is used to represent margins, borders and padding of the HTML element. The image below illustrates the box model:

img

CSS Border Properties

The CSS border properties allow you to define the style, width, and color of an element.

Syntax:
border: border-width border-style border-color;

border-width: specifies the width of the four borders. The width can be specify in px, pt, cm, em, etc or by using one of the three pre-defined values: thin, medium, or thick.

border-style: specifies what kind of border to display. The border can have a predefined style like, solid, double, dotted, dashed, groove, ridge, inset, outset, none, or hidden.

border-color: is used to set the color of the four borders. The color can be set by color name, like "red", Hexa code, like "#ff0000", by RGB value, like "rgb(255,0,0)" or transparent

border-width:5px;
border-width:thin | medium | thick;
border-style:solid | dotted | dashed | double | groove | ridge | inset | outset; CSS1
border-color:blue;
border:8px ridge red;
border-top:5px solid green;
border-bottom:8px grove orange;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-style: dotted solid double; (top, left right, bottom)
border-style: dotted solid double dashed; (top,right, bottom, left)

padding:50px; - Set equal padding from all four sides
padding-top:10px;
padding-bottom:20px;
padding-left:30px;
padding-right:40px;
padding:10px 20px 30px 40px; (top,right,bottom,left)
padding:10px 50px; (top,bottom-10px), (left,right-50px)


Output

margin:50px; - Set equal margin from all four sides
margin-top:10px;
margin-bottom:20px;
margin-left:30px;
margin-right:40px;
margin:10px 20px 30px 40px; (top,right,bottom,left)
margin:10px 50px; (top,bottom-10px), (left,right-50px)

Note: Body have a default margin. To remove body margin:
Set body margin as 0px.