CSS - Border
Here you learn how to format the border of any space using CSS.
Border Types
External CSS File
This is your external CSS file named "stylesheet.css".|
.border1 { border-style: solid; } .border2 { border-style: dotted; } .border3 { border-style: dashed; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="border1">This has a regular border.</span><br><br> <span class="border2">This has a dotted border.</span><br><br> <span class="border3">This has a dashed border.</span><br><br> </body> </html> |
||
This is how it looks
|
(2) This has a regular border. (2) This has a dotted border. (2) This has a dashed border. |
||
Border Width
External CSS File
This is your external CSS file named "stylesheet.css".|
.border4 { border-style: solid; border-width: 1px; } .border5 { border-style: dotted; border-width: 4px; } .border6 { border-style: dashed; border-width: 5px; } .border7 { border-style: solid; border-width: 5px; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="border4">This has a 1 pixel regular border.</span><br><br> <span class="border5">This has a 4 pixel dotted border.</span><br><br> <span class="border6">This has a 5 pixel dashed border.</span><br><br> <span class="border7">This has a 5 pixel regular border.</span><br><br> </body> </html> |
||
This is how it looks
|
This has a 1 pixel regular border. This has a 4 pixel dotted border. This has a 5 pixel dashed border. This has a 5 pixel regular border. |
||
Border Color
External CSS File
This is your external CSS file named "stylesheet.css".|
.border8 { border-style: solid; border-color: blue; } .border9 { border-style: dashed; border-color: #ffff00; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="border8">This has a regular blue border.</span><br><br> <span class="border9">This has a dashed red border.</span><br><br> </body> </html> |
||
This is how it looks
|
This has a regular blue border. This has a dashed red border. |
||
Border Location
External CSS File
This is your external CSS file named "stylesheet.css".|
.border10 { border-left-style: solid; border-left-color: red; border-right-style: solid; border-right-color: red; } .border11 { border-bottom-style: dashed; border-bottom-color: blue; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="border10">This has a solid red border on the left and right.</span><br><br> <span class="border11">This has a dashed blue border on the bottom.</span><br><br> </body> </html> |
||
This is how it looks
|
This has a solid red border on the left and right. This has a dashed blue border on the bottom. |
||
CSS - Border - All together
Here you can put all the formatting on 1 line by putting the width then the style then the color like the example n the CSS file below.External CSS File
This is your external CSS file named "stylesheet.css".|
.border12 { border-bottom: 1px dashed blue; } | ||
PHP Page
|
<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="stylesheet.css"> </head> <body> <br> <span class="border10">This has a 1 pixel dashed blue borderon the bottom.</span><br><br> </body> </html> |
||
This is how it looks
|
This has a 1 pixel dashed blue border on the bottom. |
||
Bookmark this page:
|
