CSS border-style

Please Share On:

Definition:

CSS border-style is used to style the border by dotted, dashed, double, etc property values. The four corners (top, right, bottom, left) border can be styled by the same CSS style property values or styled differently in four corners.

Here are values that can be used to define a border style.

Let’s see with an example.

1. dashed

Syntax

p.border-style-dashed
{
  border-style: dashed;
  border-color: red;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.border-style-dashed
    {
      border-style: dashed;
      border-color: red;
    }
    </style>
  </head>
  
  <body>
 	 <p class="border-style-dashed">Border style is dashed in red color.</p>
  </body>
</html>

Output :

Border style is dashed in red color.

try it youself

2. dotted

Syntax:

p.border-style-dotted
{
  border-style: dotted;
  border-color: red;
}

Source Code: 

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.border-style-dotted
    {
      border-style: dotted;
      border-color: red;
    }
    </style>
  </head>
  
  <body>
 	 <p class="border-style-dotted">Border style is dotted in red color.</p>
  </body>
</html>

Output :

Border style is dotted in red color.

try it yourself

3. double

Syntax:

p.border-style-double
{
  border-style: double;
  border-color: red;
}

Source Code: 

<!DOCTYPE html>
<html>
	<head>
    <style>
    p.border-style-double
    {
      border-style: double;
      border-color: red;
    }
    </style>
  </head>
  
  <body>
  	<p class="border-style-double">Border style is double in red color.</p>
  </body>
</html>

Output :

Border style is double in red color.

try it yourself

4. groove

Syntax:

p.border-style-groove
{
  border-style: groove;
  border-color: red;
}

Source Code: 

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.border-style-groove
    {
      border-style: groove;
      border-color: red;
    }
    </style>
  </head>
  
  <body>
  	<p class="border-style-groove">Border style is groove in red color. The effect depends on border color.</p>
  </body>
</html>

Output :

Border style is groove in red color. The effect depends on border color.

try it yourself

5. solid

p.border-style-solid
{
  border-style: solid;
  border-color: red;
}

Source Code: 

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.border-style-solid
    {
      border-style: solid;
      border-color: red;
    }
    </style>
  </head>
  
  <body>
  	<p class="border-style-solid">Border style is solid in red color.</p>
  </body>
</html>

Output :

Border style is solid in red color.

try it yourself

6. hidden

p.border-style-hidden
{
  border-style: hidden;
}

Source Code: 

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.border-style-hidden
    {
      border-style: hidden;
    }
    </style>
  </head>
  
  <body>
  	<p class="border-style-hidden">Border style is hidden. </p>
  </body>
</html>

Output :

Border style is hidden.

try it yourself

7. inset

p.border-style-inset
{
  border-style: inset;
  border-color: red;
}

Source Code: 

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.border-style-inset
    {
      border-style: inset;
      border-color: red;
    }
    </style>
  </head>
  
  <body>
  	<p class="border-style-inset">Border style is inset in red color. The effect depends on the border color value.</p>
  </body>
</html>

Output :

Border style is inset in red color. The effect depends on the border color value.

try it yourself

8. outset

p.border-style-outset
{
  border-style: outset;
  border-color: red;
}

Source Code: 

<!DOCTYPE html>
  <html>
  <head>
    <style>
    p.border-style-outset
    {
      border-style: outset;
      border-color: red;
    }
    </style>
  </head>
    
  <body>
 	 <p class="border-style-outset">Border style is outset in red color. The effect depends on the border color value.</p>
  </body>
</html>

Output :

Border style is outset in red color. The effect depends on the border color value.

try it yourself

9. mix

p.border-style-mix
{
  border-style: dotted double groove solid;
  border-color: red;
}

Source Code: 

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.border-style-mix
    {
      border-style: dotted double groove solid;
      border-color: red;
    }
    </style>
  </head>
  
  <body>
 	 <p class="border-style-mix">Border style is mix in red color.</p>
  </body>
</html>

Output :

Border style is mix in red color.

try it yourself

10. none

p.border-style-none
{
  border-style: none;
}

Source Code: 

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.border-style-none
    {
      border-style: none;
    }
    </style>
  </head>
  
  <body>
 	 <p class="border-style-none">No border.</p>
  </body>
</html>

Output :

No border.

try it yourself

11. ridge

p.border-style-ridge
{
  border-style: ridge;
  border-color: red;
}

Source Code: 

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.border-style-ridge
    {
      border-style: ridge;
      border-color: red;
    }
    </style>
  </head>
  
  <body>
  	<p class="border-style-ridge">Border style is ridge in red color. The effect depends on the border color value.</p>
  </body>
</html>

Output :

Border style is ridge in red color. The effect depends on the border color value.

try it yourself

Donate to support writers

You may be interested in the following topics:

Post Views: 849

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial