Scribd
Upload
39 views

Border CSS

The document discusses different types of borders that can be applied to HTML elements using CSS including dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden and combinations of types. It also covers different border width values like pixels, medium, thick and shorthand properties to set multiple border properties at once. Finally, it demonstrates how to add rounded borders to elements using the border-radius property and different pixel values.

Uploaded by

Lutfi Atmaja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views

Border CSS

The document discusses different types of borders that can be applied to HTML elements using CSS including dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden and combinations of types. It also covers different border width values like pixels, medium, thick and shorthand properties to set multiple border properties at once. Finally, it demonstrates how to add rounded borders to elements using the border-radius property and different pixel values.

Uploaded by

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

Jenis border

<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>Border-style Properti</h2>

<p>Tampilan Jenis Border:</p>

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

<p class="dashed">dashed border.</p>

<p class="solid">solid border.</p>

<p class="double">double border.</p>

<p class="groove">groove border.</p>

<p class="ridge">ridge border.</p>

<p class="inset"> inset border.</p>

<p class="outset">outset border.</p>

<p class="none">No border.</p>

<p class="hidden">hidden border.</p>


<p class="mix">Border gabungan>

</body>

</html>

border width

<html>

<head>

<style>

p.one {

border-style: solid;

border-width: 5px;

p.two {

border-style: solid;

border-width: medium;

p.three {

border-style: dotted;

border-width: 2px;

p.four {

border-style: dotted;

border-width: thick;

p.five {

border-style: double;

border-width: 15px;

p.six {

border-style: double;
border-width: thick;

</style>

</head>

<body>

<h2>Properti Border</h2>

<p>Properti border width:</p>

<p class="one">Satu.</p>

<p class="two">Dua</p>

<p class="three">Tiga</p>

<p class="four">Empat</p>

<p class="five">Lima</p>

<p class="six">Enam</p>

</body>

</html>

Border shorthand

<html>

<head>

<style>

p{

border-bottom: 6px solid red;

background-color: lightgrey;

</style>

</head>

<body>

<h2>border-bottom Property</h2>

<p>Properti singkat border-bottom>

</body>

</html>
BORDER RADIUS

<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: 50px;

padding: 5px;

p.round3 {

border: 2px solid red;

border-radius: 12px;

padding: 5px;

</style>

</head>

<body>

<h2> border-radius Properti</h2>

<p>Elemen border radius</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