Want to know more about us and our multimedia, animation & web design courses, feel free to Contact Us. We would love to hear from you.
border properties allow you to specify the style, width, and color of an element's border.
border-style property specifies what kind of border to display.
The following values are allowed:
dotted- Defines a dotted border
dashed- Defines a dashed border
solid- Defines a solid border
double- Defines a double border
groove- Defines a 3D grooved border. The effect depends on the border-color value
ridge- Defines a 3D ridged border. The effect depends on the border-color value
inset- Defines a 3D inset border. The effect depends on the border-color value
outset- Defines a 3D outset border. The effect depends on the border-color value
none- Defines no border
hidden- Defines a hidden border
border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
CSS has properties for specifying the margin for each side of an element:
All the margin properties can have the following values:
Note: Negative values are allowed.
To shorten the code, it is possible to specify all the margin properties in one property.
margin property is a shorthand property for the following individual margin properties:
So, here is how it works:
margin property has four values:
padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
CSS has properties for specifying the padding for each side of an element:
All the padding properties can have the following values:
Note: Negative values are not allowed.
The following example sets different padding for all four sides of a
width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model). So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result. In the above example, the
To keep the width at 300px, no matter the amount of padding, you can use the
box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease. Here is an example:
|Monday To Friday||8:00 Am To 8:00Pm|
|Saturday & Sunday||8:00 Am To 5:00Pm|