Scribd
Upload
13 views4 pages

CSS Border&margin

The document explains the CSS 'border-radius' property, which is used to create rounded corners on elements, with various examples demonstrating different radius values. It also covers the CSS 'margin' property, detailing how to set margins independently or using shorthand notation, and provides examples of margin specifications. Overall, it serves as a guide for applying rounded borders and margins in CSS.

Uploaded by

mohamsm05
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views4 pages

CSS Border&margin

The document explains the CSS 'border-radius' property, which is used to create rounded corners on elements, with various examples demonstrating different radius values. It also covers the CSS 'margin' property, detailing how to set margins independently or using shorthand notation, and provides examples of margin specifications. Overall, it serves as a guide for applying rounded borders and margins in CSS.

Uploaded by

mohamsm05
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS border-radius

This CSS property sets the rounded borders and provides the rounded corners around
an element, tags, or div. It defines the radius of the corners of an element.

border-radius: 30px;

border-radius: 20% 10%;

border-radius: 10% 30% 20%;

border-radius: 10% 30% 20% 40%;

Example:
<!DOCTYPE html>
<html>

<head>
<title> CSS border-radius </title>
<style>

div {
padding: 50px;
margin: 20px;
border: 6px ridge red;
width: 300px;
float: left;
height: 150px;
}

p{
font-size: 25px;
}

#one {
border-radius: 90px;
background: lightgreen;
}

#two {
border-radius: 25% 10%;
background: orange;
}
#three {
border-radius: 35px 10em 10%;
background: cyan;
}

#four {
border-radius: 50px 50% 50cm 50em;
background: lightblue;
}

</style>
</head>

<body>
<div id = "one">
<h2> Welcome to the modernmicrotech.com </h2>
<p> border-radius: 90px; </p>
</div>

<div id = "two">
<h2> Welcome to the modernmicrotech.com </h2>
<p> border-radius: 25% 10%; </p>
</div>

<div id = "three">
<h2> Welcome to the modernmicrotech.com </h2>
<p> border-radius: 35px 10em 10%; </p>
</div>

<div id = "four">
<h2>Welcome to the modernmicrotech.com</h2>
<p>border-radius: 50px 50% 50cm 50em;</p>
</div>

</body>
</html>
CSS Margin
Top, bottom, left and right margin can be changed independently using separate
properties. You can also change all properties at once by using shorthand margin
property.

CSS Margin Properties


Property Description

margin This property is used to set all the properties in one


declaration.

margin-left it is used to set left margin of an element.

margin-right It is used to set right margin of an element.

margin-top It is used to set top margin of an element.

margin- It is used to set bottom margin of an element.


bottom

Margin: Shorthand Property


CSS shorthand property is used to shorten the code. It specifies all the margin
properties in one property.

There are four types to specify the margin property. You can use one of them.
1. margin: 50px 100px 150px 200px;
2. margin: 50px 100px 150px;
3. margin: 50px 100px;
4. margin: 50px;

margin: 50px 100px 150px 200px;


It identifies that:
top margin value is 50px
right margin value is 100px
bottom margin value is 150px
left margin value is 200px

You might also like