October 11, 2015

Creating And Styling Borders with CSS

CSS provides a number of styles for borders. And it is a fun process to experiment with a different ways to style a border with CSS. Here lets look at some of the different styles for borders available in CSS.

This is the HTML and CSS code for this example


        #content p {
            padding-left: 5px;
        #content h1 {
            margin-bottom: 30px;
            text-align: center;
        .solid  {border:5px solid green}
        .dotted {border:5px dotted purple}
        .dashed {border:5px dashed red}
        .double {border:5px double blue}
        .groove {border:5px groove violet}
        .ridge  {border:5px ridge green}
        .inset  {border:5px inset black}
        .outset {border:5px outset red}

    <div id="content">
        <h1>This is an example to border style</h1>
    <p class="solid">This is a solid border style.</p>
    <p class="dotted">This is a dotted border style.</p>
    <p class="dashed">This is a dashed border style.</p>
    <p class="double">This is a double border style.</p>
    <p class="groove">THis is a groove border style.</p>
    <p class="ridge"> This is a ridge border style.</p>
    <p class="inset">This is an inset border style.</p>
    <p class="outset">This is an outset border style.</p>



This is what they look like in the browser

This is a solid border style.

This is a dotted border style.

This is a dashed border style.

This is a double border style.

THis is a groove border style.

This is a ridge border style.

This is an inset border style.

This is an outset border style.


No comments :

Post a Comment