Member Avatar for davy_yg

Hi,

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

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

Thanks.

  • 5 Contributors
  • 5 Replies
  • 153 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by charlijoseph
Member Avatar for bojjamnaresh 
<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

Edited by bojjamnaresh because: clarifying thr solution
Member Avatar for davy_yg

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.

Member Avatar for code_rum

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

Member Avatar for JorgeM

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

<hr class="dotted" />

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

Member Avatar for charlijoseph

just change in style sheet of class hr.

Edited by charlijoseph
Be a part of the DaniWeb community

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