CSS Border Style

CSS Tutorial » CSS Border Style

The border-style property sets the style of an element's four borders. for this property we can have from one to four values.

CSS Syntax

border-style: none or hidden or dotted or dashed or solid or double or groove or ridge or inset or outset or initial or inherit;

We can add CSS Style as:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file as style.css

How to create CSS Border Style - examples

You can try to execute the following code to change CSS Border Style on this page.

Examples:

1. border-style: solid double dotted dashed;
top border is solid
right border is double
bottom border is dotted
left border is dashed

2. border-style: double solid dotted;
top border is double
right and left borders are solid
bottom border is dotted

3. border-style: solid dotted;
top and bottom borders are solid
right and left borders are dotted

4. border-style: dashed;
all four borders are dashed

Example:

Example 1, How to create CSS Border Style - examples:

  <!DOCTYPE html>

  <html>

  <head>

  <title>CSS Border Style - examples - example</title>

  <style>

  h1 { 

  color:red; 

  } 

.border1 {

      border-style: solid double dotted dashed;

        }

.border2 {

      border-style: double solid dotted;

    }

.border3 {

 border-style: solid dotted;

      }

 .border4 {

     border-style: dashed;

 }

  </style>

  </head>

  <body>

  <h1>CSS Border Style - examples</h1>

<div class="border1">1 You text here: Learn how to create CSS Border Shadow.  </div> <br /><br />

<div class="border2">2 You text here: Learn how to create CSS Border Shadow.  </div> <br /><br />

 <div class="border3">3 You text here: Learn how to create CSS Border Shadow.  </div><br /><br />

 <div class="border4">4 You text here: Learn how to create CSS Border Shadow.  </div><br /><br />

  <div style="border-style: double solid dotted">5 I used inline CSS. You text here:

  Learn how to create CSS Border Radius.  </div> 

</body>

  </html>

css border style, table, 1px, top, examples, top bottom left right, dashed, mdn, dashed spacing CSS Border Style - css tutorial

819. CSS margin-top property - CSS tutorials - w3resource

https://www.w3resource.com/css/margin/CSS-margin-top-property.php

2697. EchoEcho.Com - Web Hosting - JavaScript Tutorial - HTML tutorial - CSS Tutorial - Flash Tutorial - Online for free!
Web hosting and tutorials for html javascript css flash. Online web master forum design articles, graphics, tools, tricks and much more
http://www.echoecho.com/

3300. CSS border radius, css tutorial
CSS border radius css tutorial
https://www.agernic.com/css-tutorial/css-border-radius.html

2804. CSS background, Color, Background Image, css tutorial
CSS background, Color, Background Image css tutorial
http://www.agernic.com/css-tutorial/css-background-color-image-css-tutorial.html

824. Introduction to CSS user interface - CSS tutorials - w3resource

https://www.w3resource.com/css/user-interface/introduction.php

821. CSS padding-top property - CSS tutorials - w3resource

https://www.w3resource.com/css/padding/CSS-padding-top-property.php