Scribd
Upload
93 views

Border Css

The document contains examples of using different CSS border properties including border-style, border-color, and border-radius. It demonstrates how to create various border styles like dotted, dashed, solid and double borders. It also shows how to set individual border colors and add rounded borders to elements using border-radius.

Uploaded by

Resa Zulfikar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
93 views

Border Css

The document contains examples of using different CSS border properties including border-style, border-color, and border-radius. It demonstrates how to create various border styles like dotted, dashed, solid and double borders. It also shows how to set individual border colors and add rounded borders to elements using border-radius.

Uploaded by

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

<!

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>

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-color: red;

p.two {

border-style: solid;

border-color: green;

p.three {

border-style: dotted;

border-color: blue;

</style>

</head>

<body>

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

<p>This property specifies the color of the four borders:</p>


<p class="one">A solid red border</p>

<p class="two">A solid green border</p>

<p class="three">A dotted blue border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-
style" property to set the borders first.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */

</style>

</head>

<body>

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

<p>The border-color property can have from one to four values (for the top border, right border,
bottom border, and the left border):</p>

<p class="one">A solid multicolor border</p>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<style>

p.normal {

border: 2px solid red;

padding: 5px;

p.round1 {

border: 2px solid red;

border-radius: 5px;

padding: 5px;

p.round2 {

border: 2px solid red;

border-radius: 8px;

padding: 5px;

p.round3 {

border: 2px solid red;

border-radius: 12px;

padding: 5px;

</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>

You might also like