Scribd Logo
Upload

Welcome to Scribd!

  • Border CSS

    Uploaded by

    Lutfi Atmaja
    4 views5 pages
    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.

    Original Description:

    Original Title

    BORDER CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views5 pages

    Border CSS

    Uploaded by

    Lutfi Atmaja
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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