The CSS border-style property is used to specify the border style for an element. We can also define border-style for individual sides using border-top-style, border-right-style, border-left-style and border-right-style properties.
Syntax
The syntax of CSS border property is as follows −
Selector { border: /*value*/ }
The following examples illustrate CSS border-style property −
Example
<!DOCTYPE html> <html> <head> <style> div:first-of-type { margin: 5% 0 0 20%; } div { height: 40px; width: 40px; margin: auto; padding: 10px; border-style: solid; display: flex; float: left; } #d1 { border-style: double dashed; } #d2 { border-style: dotted; } </style> </head> <body> <div></div> <div id="d1"></div> <div id="d2"></div> </body> </html>
Output
This gives the following output −
Example
<!DOCTYPE html> <html> <head> <style> div { margin: 20px; float: left; height: 80px; width: 60px; border-style: ridge; border-width: 1.2em; border-color: midnightblue; border-bottom-left-radius: 50%; } div + div { height: 120px; width: 80px; border-style: double; border-color: seagreen; border-right-width: 180px; border-bottom-right-radius: 100%; } </style> </head> <body> <div></div> <div></div> </body> </html>
Output
This gives the following output −