Hi,

I would like to style my <hr> line with css.

How to create dashed or dotted line with orange color with css?

Thanks.

Recommended Answers

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">


    hr{border:dotted 4px #F90;} 

    /* use this for dashed 

    hr{border:dashed 4px #F90;}  */  



</style>

<title>Untitled Document</title>

</head>

<body>

<hr />

</body>

</html>

Try this way

Jump to Post

Add class and apply changes to that hr with the added class

Jump to Post

All 5 Replies

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">


    hr{border:dotted 4px #F90;} 

    /* use this for dashed 

    hr{border:dashed 4px #F90;}  */  



</style>

<title>Untitled Document</title>

</head>

<body>

<hr />

</body>

</html>

Try this way

This shall reset all <hr> into the same patern right? what if I would like some <hr> to remain a straight line with black color.

Add class and apply changes to that hr with the added class

So for line 23, change it to something like..

<hr class="dotted" />

Then in your style sheet...
hr.dotted {border:dashed 4px #F90;}

just change in style sheet of class hr.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.