Scribd Logo
Upload

Welcome to Scribd!

  • CSS Border Properties: ST ND

    Uploaded by

    Subhadeep Panda
    47 views11 pages

    Original Title

    CSSborder

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    47 views11 pages

    CSS Border Properties: ST ND

    Uploaded by

    Subhadeep Panda

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    CSS Border Properties

    The CSS border properties allow you to specify the style, width, and color of an
    element's border.
    We can define border style, width and border color in a single statement using CSS
    properties border.

    Syntax :
    {Border : border-width border-style border-color;}
     The border-width property sets the width of an element's four borders. This
    property may have from one to four values.
    border-width: medium| thin| thick| length| initial| inherit;
     CSS Border Style : border-style property specifies what kind of border to
    display. Values of this property may be dotted, dashed, solid, double ,groove,
    ridge , inset, outset, none, hidden

     The border-color sets the color of an element's borders. Values may be colour
    name or RGB color code or hexadecimal color code.

    Example :
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 { border: 5px solid red;}
    h2 { border: 4px dotted blue;}
    div { border: double;}
    </style>
    </head>
    <body>
    <h1>A heading with a solid red border</h1>
    <h2>A heading with a dotted blue border</h2>
    <div>A div element with a double border.</div>
    </body></html>

    In above example of style rules –


     Border property of 1st and 2nd style rules defined value of border-width,
    border-style and border-color in a single statement for h1& h2 selectors.
     Border property of 3rd style rule defined only value of border-style.

    Output :

    1
    Border-Style Property

    Border Style : We can define border style for individual side of element. Value of
    border-style may be dotted | dashed | solid | grove | none.
    Example :

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
    border-width: thick;
    border-top-style: dashed;
    border-bottom-style: dotted;
    border-left-style: thick;
    border-bottom-style: thin;
    }
    div {
    border-style: groove;
    border-width: 7px;
    border-color: coral;
    }
    </style>
    <body>
    <h1>A Heading with a groove border</h1>
    <div>A div element with a groove border.</div>
    </body></html>

    2
    Border-color property
    The border-color property is used to set the color of the four borders. The border-
    color property can have from one to four values. Four sides of element border i.e
    right border, bottom border, top border and the left border may be different colours.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.four {
    border-style: solid;
    border-color: red green blue yellow;
    /* red top, green right, blue bottom and yellow left */
    }
    p.three {
    border-style: solid;
    border-color: yellow red blue ;
    /* yellow left, red top and green bottom */
    }
    p.two {
    border-style: solid;
    border-color: yellow blue ;
    /* yellow left & right and blue top & bottom */
    }
    p.one {
    border-style: solid;
    border-color: blue ;
    /* Four sides are blue */
    }
    </style>

    3
    </head>
    <body>
    <h2>The border-color Property</h2>
    <p class="four">
    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="three">
    example of three colours (for yellow left, red top and green bottom):
    </p>
    <p class="two">
    example of two colours ( yellow left & right and blue top & bottom):
    </p>
    <p class="one">
    example of one colour
    </p>
    </body>
    </html>

    Note :
    In above example class selectors “four”, ”three”, “two”, “one” defined four style
    rules in internal style sheet.

    Class selector ‘four’ defined four colours in border-color property. It makes four
    different colours in sides of borders.

    Class selector ‘three’ defined three colours in border-color property. It makes three
    different colours in sides of borders(Left & Right, Top, Bottom).

    Class selector ‘two’ defined two colours in border-color property. It makes two
    different colours in sides of borders(Left & Right, Top& Bottom).

    Class selector ‘one’ defined single colour in border-color property. It makes four
    sides of borders in same colour.

    Four ‘<p>’elements implements the style rules using predefined class attribute.

    4
    Output :

    Border radius property

    Border radius property : The border-radius property used to define rounded corner of
    border.
    Radius of corner round depends on pixels value. Types of round in four corners may
    be uniform.
    border-radius: 12px;

    Types of round in two corners may be two types-


    border-radius: 10px 30px;

    Types of round in three corners may be three types -


    border-radius: 30px 20px 10px;

    Types of round in four corners is four types -


    border-radius: 10px 20px 30px 40px;

    5
    Example :

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.normal {
    border: 2px solid red;
    }
    p.round1 {
    border: 2px solid red;
    border-radius: 5px;
    }
    p.round2 {
    border: 2px solid red;
    border-radius: 8px;
    }
    p.round3 {
    border: 2px solid red;
    border-radius: 12px;
    }
    p.round4 {
    border: 2px solid red;
    border-radius: 10px 30px;
    }
    p.round5 {
    border: 2px solid red;
    border-radius: 30px 20px 10px;
    }
    p.round6
    {
    border: 2px solid red;
    border-radius: 10px 20px 30px 40px;
    }
    </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>

    6
    <p class="round4">2 types Round border<br>
    2 types Roundest border
    </p>
    <p class="round5">3 types Round border<br>
    3 types Round border<br>
    3 types Round border<br>
    3 types Round border
    </p>
    <p class="round6">
    4 types Round border
    <br>
    4 types Round border<br>
    4 types Round border</p>
    </body>
    </html>

    Note :
    In above example class selectors “normal”, ”round1”, “round2”,
    “round3”,”round4”,”round5”,”round6” defined seven style rules in internal style
    sheet.
     Class selector ‘normal’ defined width, style and color in CSS border property.

     Class selector ‘round1’,‘round2’and ‘round3’ defined CSS border property


    with uniform value in border-radius property .

     Class selector ‘round4’ defined CSS border property with two different values
    for element corners in border-radius property .

     Class selector ‘round5’ defined CSS border property with three different
    values for three corners of element in border-radius property .

     Class selector ‘round6’ defined CSS border property with four different values
    for each corners of element in border-radius property .
    Style rules of class selectors are used in each <p>.

    Output of above example :

    7
    Border-Image Property

    The border-image property allows you to specify an image to be used as the border
    around an element. Border-image property consist with border-image-source, border-
    image-slice, border-image-width.

     The border-image-source property specifies the path to the image to be used as


    a border.

     The border-image-slice property specifies how to slice the image specified


    by border-image-source. Values may be number | % .

     The border-image-width CSS property sets the width of an element's border


    image.

    We can define values of border-image-source, border-image-slice, border-image-


    width in border-image property using single statement.

    Syntax :

    8
    Border-image: border-image-source border-image-slice border-image-width;

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #borderimg1
    {
    border : 40px solid transparent;
    border-image: url(roase.png) 70 40;
    }
    </style>
    </head>
    <body>
    <h1 >The border-image Property</h1>
    <p id="borderimg1">
    The border-image property specifies an image to be used as the border around an
    element:
    Here is the original image:</p>
    </body>
    </html>

    It may be possible defines values of border-image-source, border-image-slice,


    border-image-width properties individually in different statement.

    Border-image-source
    The border-image-source property specifies the path to the image to be used as a
    border instead of the normal border around an element.
    border-image-source : url(file name);

    9
    Example :
    border-image-source : url(rose.png);

    Border-image-slice property

    The border-image-slice property specifies how to slice the image specified by border-
    image-source.
    The border-image-slice property can take from one to four values. If the fourth value
    is omitted, it is the same as the second. If the third one is also omitted, it is the same
    as the first. If the second one is also omitted, it is the same as the first.

    Syntax : border-image-slice: number |% |fill

    Example of border-image-source, border-image-slice, border-image-width


    properties individually in different statement :

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #borderimg1
    {
    border : 40px solid transparent;
    border-image-source: url(roase.png);
    border-image-slice: 30% 30% 35% 40%;
    border-image-width : 10;
    }
    </style>
    </head>
    <body>
    <h1 >The border-image Property</h1>
    <p id="borderimg1">
    The border-image property specifies an image to be used as the border around
    an element:
    Here is the original image:</p>
    </body>
    </html>

    10
    11

    You might also like