- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
The border Shorthand Property in CSS
The border property is used to define the border properties for an element. It is a shorthand for the following properties −
border-width − medium, thin, thick or a specific length
border-style − solid, dashed, dotted, double
border-color − Set the color
Syntax
The syntax of the CSS border property is as follows −
Selector { border: /*value*/ }
The value is the border style, width, and color.
The following examples illustrate CSS border property −
Set a dotted border
In this example, we have set a dotted border using the border property with the style dotted −
#demo { border: 4px dotted magenta; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> img { margin-top: 14px; margin-left: 30px; border: 2px solid orange; box-shadow: 0 0 12px 1px black; } #demo { border: 4px dotted magenta; } </style> </head> <body> <img src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg"> <img id="demo" src="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg"> </body> </html>
Set a double border
In this example, we have set a double border using the border property. Here the border width is 2px, style is double and color navy −
td { font-size: 24px; border: 2px double navy; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> table { margin: 1em; border: 3px dashed green; } td { font-size: 24px; border: 2px double navy; } </style> </head> <body> <table> <tr> <td>This</td> <td>text</td> </tr> <tr> <td>is</td> <td>demo</td> </tr> </table> </body> </html>
Set a dashed border
In this example, we have set dashed border using the border property. Here the border width is 2px, style is dashed and color blue −
h2 { border: 2px dashed blue; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> body { background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat center; } h2 { border: 2px dashed blue; } </style> </head> <body> <h2>Learning is fun</h2> </body> </html>
Set a thin border
In this example, we have set a thin border using the border property with the width thin −
h2 { border: thin solid blue; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> body { background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat center; } h2 { border: thin solid blue; } </style> </head> <body> <h2>Learning is fun</h2> </body> </html>
Set a thick border
In this example, we have set a thick border using the border property with the width thick −
h2 { border: thick solid red; }
Example
Let us see the example −
<!DOCTYPE html> <html> <head> <style> body { background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat center; } h2 { border: thick solid red; } </style> </head> <body> <h2>Learning is fun</h2> </body> </html>