#7 CSS – Border

Cara membuat border pada halaman website dengan cara menambahkan property border-style pada file css dengan value seperti berikut :

file index.html

<!DOCTYPE html>
<html>

<head>
    <title>border</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Border Style</h1>
    <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">border.</p>
    <p class="hidden">hidden border.</p>
    <p class="mix">mixed border.</p>
</body>

</html>

file style.css

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;
}
border style

Border width

Mengatur ketebalan border menggunakan border width dengan menambahkan nilai spesifik (px, pt, cm, em) atau menggunakan pre-defined values: thin, medium, atau thick.

file index.html

<!DOCTYPE html>
<html>

<head>
    <title>border</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <p class="one">Some text.</p>
    <p class="two">Some text.</p>
    <p class="three">Some text.</p>
    <p class="four">Some text.</p>
    <p class="five">Some text.</p>
    <p class="six">Some text.</p>
    <p class="seven">Some text.</p>

</html>

file style.css

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;
}

p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
border width
border-width

Border Color

Border bisa kita berikan warna dengan memberi property border-color. Kita menggunakan file sebelumnya dan menambahkan property border-color pada file style.css

p.one {
    border-style: solid;
    border-width: 5px;
    border-color: aqua;
}

p.two {
    border-style: solid;
    border-width: medium;
    border-color: blue;
}

p.three {
    border-style: dotted;
    border-width: 2px;
    border-color: blueviolet;
}

p.four {
    border-style: dotted;
    border-width: thick;
    border-color: chartreuse;
}

p.five {
    border-style: double;
    border-width: 15px;
    border-color: red;
}

p.six {
    border-style: double;
    border-width: thick;
    border-color: gold;
}

p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
    border-color: lightcoral;
}
border color
border-color

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *