How To Change The Thickness Of Hr Tag Using CSS ? - GeeksforGeeks

Trang chủ » Hr Dotted Line Css » How To Change The Thickness Of Hr Tag Using CSS ? - GeeksforGeeks

Có thể bạn quan tâm

Skip to content geeksforgeeks
  • Courses
    • DSA Courses
    • Programming Languages
  • Tutorials
    • Python Tutorial
      • Python Loops and Control Flow
    • Java
      • Java Interview Questions
      • Java Quiz
      • Advance Java
    • Programming Languages
    • System Design
    • Interview Corner
    • Computer Science Subjects
    • DevOps
    • Linux
    • Software Testing
    • Databases
    • Android
    • Excel
    • Mathematics
  • DSA
    • Data Structures
    • Algorithms
      • Analysis of Algorithms
      • Searching Algorithms
      • Sorting Algorithms
    • Practice
      • Company Wise Coding Practice
      • Practice Problems Difficulty Wise
      • Language Wise Coding Practice
      • Curated DSA Lists
    • Company Wise SDE Sheets
    • DSA Cheat Sheets
    • Puzzles
  • Data Science
    • Data Science Packages
    • Data Visualization
    • Data Analysis
  • Web Tech
    • Web Development Using Python
      • Django
      • Flask
    • Cheat Sheets
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
▲ Open In App How to change the thickness of hr tag using CSS ? Last Updated : 29 Oct, 2024 Summarize Comments Improve Suggest changes Like Article Like Save Share Report Follow

The <hr> tag in HTML creates a horizontal rule or a thematic break in an HTML page. The thickness of the <hr> tag defines the height of the horizontal line. To change the thickness of hr tag, CSS height property is used.

Syntax

hr { height: 3px;}

Example 1: Inserting a horizontal rule along with some CSS properties.

HTML <!DOCTYPE html> <html lang="en"> <head> <style> .custom-hr{ border:none; height:12px; background:black; margin:20px0; } </style> </head> <body> <h1>Code World</h1> <hr class="custom-hr" /> <h3>A Computer Science Portal</h3> </body> </html>

Output

Output

change the thickness of hr tag

Example 2: Different styling and thickness of <hr> element in CSS.

HTML <!DOCTYPE html> <html lang="en"> <head> <style> hr.class-1{ border-top:10pxsolid#8c8b8b; } hr.class-2{ border-top:3pxdouble#8c8b8b; } hr.class-3{ border-top:1pxdashed#8c8b8b; } hr.class-4{ border-top:1pxdotted#8c8b8b; } hr.class-5{ background-color:#fff; border-top:2pxdashed#8c8b8b; } hr.class-6{ background-color:#fff; border-top:5pxdotted#8c8b8b; } </style> </head> <body> <hr class="class-1" /> <hr class="class-2" /> <hr class="class-3" /> <hr class="class-4" /> <hr class="class-5" /> <hr class="class-6" /> </body> </html>

Output

Output

change the thickness of hr tag

P

Pankaj_Singh Follow Improve Previous Article How to indent text in HTML by using CSS ? Next Article

Similar Reads

  • How to change the thickness of hr tag using CSS ? The <hr> tag in HTML creates a horizontal rule or a thematic break in an HTML page. The thickness of the <hr> tag defines the height of the horizontal line. To change the thickness of hr tag, CSS height property is used. Syntax hr { height: 3px;}Example 1: Inserting a horizontal rule alo 1 min read
  • How to Change Font Size using CSS? The CSS font-size property is used to change the font size of text. CSS font-size PropertyThe font-size property in CSS sets the size of the text of HTML elements. Values can be in pixels, percentages, em, rem etc. Syntax font-size: value;Example: We can use various font-size units like - em, smalle 2 min read
  • How to set the Text Color of HTML Element using CSS? Setting the text colour of an HTML element using CSS involves using the color property. It allows you to define the colour of the text content within the selected element. Note: The color property can take various colour values, such as named colours, hexadecimal, RGB, or HSL values. Syntax:p { colo 2 min read
  • How to Set the Border Thickness of a Table in HTML ? To set the border thickness of a table in HTML, you use the "border" attribute within the <table> tag. This attribute specifies the width of the borders around the table and its cells. The value of the "border" attribute represents the thickness of the border in pixels (px). Syntax<table bo 2 min read
  • How to Change the Margin of Paragraph using JavaScript ? The CSS Margin property is used to give space around elements. It is completely transparent and has no background color. It clears up space around the component. Using separate properties, you can independently change the top, bottom, left, and right margins. In this article, we'll see how to change 4 min read
  • How to Add Shadow to Text using CSS? The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis. Note: We can customize text shadow by changing position, blur, and color for improved appearance and visua 1 min read
  • How to make rounded corner using CSS ? Creating rounded corners is a popular design technique in web development that enhances the visual appeal of web elements. The CSS border-radius property allows you to easily set the radius of an element's corners, making them rounded. In this article, we will explore how to use the border-radius pr 3 min read
  • How to set the margins of a paragraph element using CSS ? The CSS margins properties are used to make space around components, outside any characterized borders. With CSS, you have full power over the margins. There are properties for setting the edge for each side of a component (top, right, base, and left). CSS has properties for indicating the edge for 2 min read
  • How to Change the Height of br Tag? The <br> (break) tag in HTML is used to create line breaks in text or content. By default, the <br> tag generates a simple line break without any additional spacing. Sometimes we need to adjust the height or spacing of the line break to control the layout. In this article, we will explor 2 min read
  • How to Add Stroke using CSS ? Adding a stroke using CSS means applying an outline or border around text or elements to enhance visibility and style. This effect is typically achieved with properties like `text-shadow` for text or stroke in SVG elements, creating bold, defined edges. Several methods can be used to add strokes usi 2 min read
  • How to define the color of the border using CSS ? We can give the color of the border using border or border-color properties. We need to give border-style property. Approach 1: We will give the color of the border using the border property of CSS.We will give our CSS inside the tags which are also known as an inline style.We need to give the borde 2 min read
  • How to bold the text using CSS ? In HTML, we use the <b> and <strong> tags to make content bold. However, when it comes to styling text, CSS provides a more versatile way to achieve boldness through the font-weight property. This property allows you to set various boldness levels for your text to mark something importan 2 min read
  • How to Create a Responsive Text using CSS ? This article will show you how to create responsive text with HTML and CSS. Responsive text means the text size will change in different screen sizes. We can create Responsive Text using CSS Media Query or using viewport width (vw). Example 1: In this example, we will create a responsive text using 2 min read
  • How to specify the width of the border image using CSS? In this article, we will set the width of the border image using CSS. To set the width of the border image, we use CSS border-image-width property. The border-image-width property is used to set the width of the border-image. It can be set by providing multiple values. If only one value is provided, 2 min read
  • How to change the color of horizontal line (hr element) using CSS ? The HTML <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The color of the <hr> tag can be set by using the background-color property in CSS. Example 1: In this example, the CSS within the <style> section cust 2 min read
  • How to change the underline color in CSS? In this article, we are going to learn how to change the underline color in CSS, To change the underline color in CSS, use the text-decoration-color property. Set it to the desired color value. Styling is implemented in HTML text to make it catchy and attractive. The text can be made italic, underli 1 min read
  • How to Change Line Spacing in CSS? The line-height property in CSS is used to adjust line spacing between lines of text. Syntax line-height: value;Example 1: In this example, we will increase the line height using the CSS line-height property. [GFGTABS] HTML <h3>Paragraph with Default Line Spacing</h3> <p> HTML stan 2 min read
  • How to Change the Font Family & Size of Text in CSS ? In CSS, the font family and size of the text can be customized to enhance the visual appearance of the text within the application. We can use various inbuilt properties offered by CSS to change font family and size. Below are the approaches to change the font family and size of text in CSS: Table o 3 min read
  • How to indent text in HTML by using CSS ? Text indentation in an HTML document sets the length of empty white space before lines of text in a block, typically marking the beginning of a paragraph. Proper indentation can enhance the readability and layout of your web content. Here, we will explore several common approaches for text indentati 3 min read
Article Tags :
  • CSS
  • Web Technologies
  • CSS-Misc
Like three90RightbarBannerImg Explore More We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy Got It ! Lightbox Improvement Suggest changes Suggest Changes Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal. geeksforgeeks-suggest-icon Create Improvement Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all. geeksforgeeks-improvement-icon Suggest Changes min 4 words, max CharLimit:2000

What kind of Experience do you want to share?

Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences

Từ khóa » Hr Dotted Line Css