CSS Borders

       No comments




Border property helps in creating borders around the text

CSS border properties allow you to specify the style, width, and color of an element's border.

The border-style property specifies what kind of border to display.

  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - Defines a hidden border

border-style property can have from one to four values (for the top border, right border, bottom border, and the left border)

example:

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Border Property</h1>
    <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>

Style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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


Output:



Border Width

It sets the width of the border in pixels (or there are key values too like medium, thin, thick)

border-width: thin;

CSS Border Color

This property assigns colours to the border of the text

    border-color: brown;


Shorthand Property for border:

    border: 2px solid red;


Border Radius

Rounded borders around buttons look classic, which can be achieved by border-radius property.

border-radius: 10px;


0 Comments:

Post a Comment

Do leave your comments