How to customize hr tag in html
How TO - Style HR (Horizontal Ruler/Line)Learn how to style an hr element with CSS. Show
Horizontal LineYou can use the Example /* Red border */ /* Dashed red border */ /* Dotted red border */ /* Thick red border */ /* Large rounded green border */ Try it Yourself » Related PagesThe HTML hr tag. ExampleUse the tag to define thematic changes in the content: The Main Languages of the WebHTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page, and consists of a series of elements. HTML elements tell the browser how to display the content. CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once. JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more. Try it Yourself » More "Try it Yourself" examples below. Definition and UsageThe The Browser Support
Global AttributesThe Event AttributesThe More ExamplesExampleAlign a element (with CSS): Try it Yourself » ExampleA noshaded (with CSS): Try it Yourself » ExampleSet the height of a element (with CSS): Try it Yourself » ExampleSet the width of a element (with CSS): Try it Yourself » Related PagesHTML DOM reference: HR Object Default CSS SettingsMost browsers will display the Example hr { Try it Yourself » The Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS. This element's attributes include the global attributes. Sets the alignment of the rule on the page. If no value is specified, the default value is Sets the color of the rule through color name or hexadecimal value. Sets the rule to have no shading. Sets the height, in pixels, of the rule. Sets the length of the rule on the page through a pixel
or percentage value. ResultSpecifications
Browser compatibilityBCD tables only load in the browser See alsoCan you style hr in HTML?Its simple to add a horizontal line in your markup, just add:
. Browsers draw a line across the entire width of the container, which can be the entire body or a child element. Originally the HR element was styled using attributes. How do I change my HR tag?Move inside title element [ in this example].Add padding-left:25% and padding-right:25% to title element.. Add text-align:center to title element.. How do I color a HR tag?Attribute Values:. color_name: It sets the Text color by using the color name. For example “red”.. hex_number: It sets the text color by using the color hex code. For example “#0000ff”.. rgb_number: It sets the text color by using the rgb code. For example: “RGB(0, 153, 0)”.. Can we change HR color in HTML?You can simply use the CSS background-color property in combination with the height and border to the change the default color an
element. In the following example we've changed the color of hr tag to light grey. You can also increase the thickness of the line by simply increasing the value of the height property. |
