$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home

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

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


  <html>

  <head>
   
    <style>
   
        #content p {
            padding-left: 5px;
        }
       
        #content h1 {
            margin-bottom: 30px;
            text-align: center;
            color:purple;
           
        }
       
        .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}
   
    </style>
   
    </head>

  <body>
   
    <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>
   
    </div>

  </body>

  </html>





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.



END...

COMMENTS

Name

css,17,html,7,php,2,python,1,tech,18,
ltr
item
iWriteLess Tech Blog: Creating And Styling Borders with CSS
Creating And Styling Borders with CSS
iWriteLess Tech Blog
http://www.iwriteless.com/2015/10/creating-and-styling-borders-with-css.html
http://www.iwriteless.com/
http://www.iwriteless.com/
http://www.iwriteless.com/2015/10/creating-and-styling-borders-with-css.html
true
2724151228810149585
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy