CSS Border Properties
The CSS border properties allow you to specify the style, width, and color of an element’s border.
Border Style
The border-style the property specifies what kind of border to display.
The following values are allowed:
dotted– Defines a dotted borderdashed– Defines a dashed bordersolid– Defines a solid borderdouble– Defines a double bordergroove– Defines a 3D grooved border. The effect depends on the border-color valueridge– Defines a 3D ridged border. The effect depends on the border-color valueinset– Defines a 3D inset border. The effect depends on the border-color valueoutset– Defines a 3D outset border. The effect depends on the border-color valuenone– Defines no borderhidden– Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and left border).
CSS All Type of Border Example
Border Width
Border Individual Sides
Border Shorthand Property
CSS Rounded border
Div Border
CSS Margins
What are CSS Margins?
The CSS 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).
The margin on Individual Sides
CSS has properties for specifying the margin for each side of an element:
margin-topmargin-rightmargin-bottommargin-left
All the margin properties can have the following values:
- auto – the browser calculates the margin
- length – specifies a margin in px, pt, cm, etc.
- % – specifies a margin in % of the width of the containing element
- inherit – specifies that the margin should be inherited from the parent element
Note: Negative values are allowed.
CSS Margins Example
Margin – Shorthand Property
To shorten the code, it is possible to specify all the margin properties in one property.
The margin property is a shorthand property for the following individual margin properties:
margin-topmargin-rightmargin-bottommargin-left
So, here is how it works:
If the margin property has four values:
- margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
Margin Shorthand Property Example
CSS Padding
The CSS 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).
Padding on Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-toppadding-rightpadding-bottompadding-left
All the padding properties can have the following values:
- length – specifies padding in px, pt, cm, etc.
- % – specifies padding in % of the width of the containing element
- inherit – specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
The following example sets different padding for all four sides of an element.
CSS Padding Example
CSS Padding Shorthand Property
Padding and Element Width
The CSS width the 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
element is given a width of 300px. However, the actual rendered width of the
element will be 350px (300px + 25px of left padding + 25px of right padding)
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:
CSS border, padding, margin Task 1
CSS border, padding, margin Task 2
CSS border, padding, margin Task 3
CSS border, padding, margin Task 4
