Chapter 8
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element:
Example
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>
CSS Margins
Margins are used to create space around elements, outside of any defined borders.
Example
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Margins</h2>
<div>This element has a margin of 70px.</div>
</body>
</html>
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).
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:-
-margin-top
-margin-right
-margin-bottom
-margin-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
Tip: Negative values are allowed.
Example
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 50px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
Example
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 4 values</h2>
<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>
<hr>
</body>
</html>
p {
margin: 25px 50px 75px 100px;
}
p {
margin: 25px 50px 75px;
}
If the margin property has three values:
-margin: 25px 50px 75px;
-top margin is 25px
-right and left margins are 50px
-bottom margin is 75px
If the margin property has two values:
- margin: 25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
p {
margin: 25px 50px;
}
If the margin property has one value:
- margin: 25px;
- all four margins are 25px
Example
Use the margin shorthand property with one value:
p {
margin: 25px;
}