- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
How to create different dividers with CSS?
To create different dividers with CSS, the code is as follows −
Example
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1" /> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .dashed { border-top: 3px dashed rgb(216, 22, 22); } .dotted { border-top: 3px dotted rgb(8, 11, 167); } .solid { border-top: 3px solid rgb(18, 167, 38); } .rounded { border-top: 8px solid rgb(200, 255, 0); border-radius: 5px; } .double { border-top: 3px double rgb(219, 46, 196); } </style> </head> <body> <h1>Dividers Example</h1> <p>Dashed</p> <hr class="dashed" /> <p>Dotted</p> <hr class="dotted" /> <p>Solid</p> <hr class="solid" /> <p>Rounded</p> <hr class="rounded" /> <p>Double</p> <hr class="double" /> </body> </html>
Output
The above code will produce the following output −
- Related Articles
- How to create different shapes with CSS?
- How to add link dividers in a Navigation Bar with CSS
- How to create different device looks (smartphone, tablet and laptop) with CSS?
- How to create tooltips with CSS?
- How to create "notes" with CSS?
- How to create arrows with CSS?
- How to create fading effect with CSS
- How to create image filters with CSS
- How to create Icon Bar with CSS?
- How to create a pagination with CSS?
- How to create fading buttons with CSS?
- How to create loading buttons with CSS?
- How to create pill buttons with CSS?
- How to create notification buttons with CSS?
- How to create icon buttons with CSS?

Advertisements