Scribd
Upload
16 views

CSS_Codes

The document provides information on the CSS 'border-style' property, detailing various border styles such as dotted, dashed, solid, and more. It also includes an example of applying different border styles to individual sides of an element. Additionally, there are margin and padding specifications included, though they are not fully integrated into a complete HTML structure.

Uploaded by

ramkumarlaksh74
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views

CSS_Codes

The document provides information on the CSS 'border-style' property, detailing various border styles such as dotted, dashed, solid, and more. It also includes an example of applying different border styles to individual sides of an element. Additionally, there are margin and padding specifications included, though they are not fully integrated into a complete HTML structure.

Uploaded by

ramkumarlaksh74
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Borders:

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>


<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>


<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

Sides:

<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>


<p>2 different border styles.</p>
</body>
</html>

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;

margin: 0 0 50px 0;

padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;

You might also like