How To Half Border Design And Fixed Width Border Design In CSS

Half Border Design And Fixed Width Border Design In CSS

Half Border Design And Fixed Width Border Design In CSS - techbriefers

In CSS we can put borders to either side of an element but what about making a half border design or the border for content only i.e, text border design. In this article, I hope i can solve this query of novice designers in very simple and easy way. So let’s get started.

In the first section I am going to tell the design will will have a border under a heading and the text only will have bold border. This layout is frequently used and seen in WordPress. I too have done this with my heading by customizing my layout.

How to create a border designing only for text in CSS.

Half Border Design And Fixed Width Border Design In CSS

Above is the heading block for which we are going to design a border that will be of the same width as the text is. The css for this is:

Here i am creating a border for a span inside heading tag. Span is an inline block which contains the width of content. Heading is a block element that acquires with of whole container(100% of container by default).

Here, h1 tag with class my-heading have a border of 1px in grey color which is a full width border. Inside it there is a span element which has border of 5px in red like color (#ef3e47) which is of same width as of text present.

How to create a border design of a fixed width in CSS

Half Border Design And Fixed Width Border Design In CSS

Above is the heading block with class my-heading-two. I am designing a fixed width border of 5px for this heading element of (in this case 250px). The css for this is below.

Though, the styling is simple but I think it should be more in a managed way to produce a nice result. So, below I am providing a full code for both the deigns usable in a full web page.

HTML code for designing border of a fixed width and text width
CSS code for designing border of a fixed width and text width
Complete demo with internal css code for designing border of a fixed width and text width

Share your thoughts

avatar
  Subscribe  
Notify of