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.

Contents show

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
<h2 class="my-heading"><span>What is Lorem Ipsum?</span></h2>

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:

.my-heading {
    border-bottom: 1px solid #ccc;
}

.my-heading span {
    font-size: 20px;
    border-bottom: 5px solid #ef3e47;
    padding: 6px;
    margin: 0 0 -1px;
    display: inline-block;
}

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
<h1 class="my-heading-two"><span>Demo Of fixed width border</span></h1>

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.

.my-heading-two span {
	padding: 0;
}

.my-heading-two span:after {
	content: "";
	display: block;
	width: 250px;
	height: 5px;
	background-color: #478500;
}

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 
<div class="content">
    <h1 class="my-heading heading-main"><span>Demo Of border for text only</span></h1>
    <div class="my-section">
        <h2 class="my-heading"><span>What is Lorem Ipsum?</span></h2>
        <div class="my-desc">
            <div class="my-exerpt">
                Sample Paragraph.
            </div>
        </div>
    </div>
    <div class="my-section">
        <h2 class="my-heading"><span>Why do we use it?</span></h2>
        <div class="my-desc">
            <div class="my-exerpt">
                Sample Paragraph.
            </div>
        </div>
    </div>
</div>
<div class="content content2" style="margin-top: 50px;">
    <h1 class="my-heading heading-main" style="text-align: left"><span>Demo Of fixed width border</span></h1>
    <div class="my-section">
        <h2 class="my-heading"><span>What is Lorem Ipsum?</span></h2>
        <div class="my-desc">
            <div class="my-exerpt">
                Sample Paragraph.
            </div>
        </div>
    </div>
    <div class="my-section">
        <h2 class="my-heading"><span>Why do we use it?</span></h2>
        <div class="my-desc">
            <div class="my-exerpt">
                Sample Paragraph.
            </div>
        </div>
    </div>
</div>
CSS code for designing border of a fixed width and text width 
<style>
     .content {
        width: 70%;
        margin: 100px auto auto;
        background: #efefef;
        clear: both;
        display: table;
        padding: 30px 0;
    }

    .my-section {
        width: 48%;
        text-align: justify;
        float: left;
        padding: 10px;
    }

    .my-heading {
        border-bottom: 1px solid #ccc;
    }

    .my-heading span {
        font-size: 20px;
        border-bottom: 5px solid #ef3e47;
        padding: 6px;
        margin: 0 0 -1px;
        display: inline-block;
    }

    .heading-main {
        text-align: center;
        margin: 0;
    }

    .content2 .my-heading span {
        border: none;
        padding: 0;
    }

    .content2 .my-heading span:after {
        content: "";
        display: block;
        width: 250px;
        height: 5px;
        background-color: #478500;
    }
</style>
Complete demo with internal css code for designing border of a fixed width and text width 
<html>
<head>
    <title>Techbriefers demo</title>
    <link rel="icon" href="https://techbriefers.com/wp-content/uploads/2018/10/logo_icon.png" sizes="32x32">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<style>
    body {
        margin: 0;
        background: #fefefe;
    }

    * {
        font-family: 'Montserrat', sans-serif;
    }

    h1 span {
        font-size: 24px !important;
    }

    .header {
        background: black;
        width: 100%;
        position: absolute;
        top: 0;
    }

    .logo-container {
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }

    .logo-container .tagline {
        font-size: 28px;
        clear: both;
        color: #fff;
        font-weight: 600;
        display: block;
    }

    .content {
        width: 70%;
        margin: 100px auto auto;
        background: #efefef;
        clear: both;
        display: table;
        padding: 30px 0;
    }

    .my-section {
        width: 48%;
        text-align: justify;
        float: left;
        padding: 10px;
    }

    .my-heading {
        border-bottom: 1px solid #ccc;
    }

    .my-heading span {
        font-size: 20px;
        border-bottom: 5px solid #ef3e47;
        padding: 6px;
        margin: 0 0 -1px;
        display: inline-block;
    }

    .heading-main {
        text-align: center;
        margin: 0;
    }

    .content2 .my-heading span {
        border: none;
        padding: 0;
    }

    .content2 .my-heading span:after {
        content: "";
        display: block;
        width: 250px;
        height: 5px;
        background-color: #478500;
    }

</style>
<div class="header">
    <div class="logo-container">
        <a href="https://techbriefers.com/"><img
                    src="https://techbriefers.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2019/05/techBriefers-logo-dark.jpg.webp"></a>
        <span class="tagline">DEMO</span>
    </div>
</div>
<div class="content">
    <h1 class="my-heading heading-main"><span>Demo Of border for text only</span></h1>
    <div class="my-section">
        <h2 class="my-heading"><span>What is Lorem Ipsum?</span></h2>
        <div class="my-desc">
            <div class="my-exerpt">
                Sample Paragraph.
            </div>
        </div>
    </div>
    <div class="my-section">
        <h2 class="my-heading"><span>Why do we use it?</span></h2>
        <div class="my-desc">
            <div class="my-exerpt">
                Sample Paragraph.
            </div>
        </div>
    </div>
</div>
<div class="content content2" style="margin-top: 50px;">
    <h1 class="my-heading heading-main" style="text-align: left"><span>Demo Of fixed width border</span></h1>
    <div class="my-section">
        <h2 class="my-heading"><span>What is Lorem Ipsum?</span></h2>
        <div class="my-desc">
            <div class="my-exerpt">
                Sample Paragraph.
            </div>
        </div>
    </div>
    <div class="my-section">
        <h2 class="my-heading"><span>Why do we use it?</span></h2>
        <div class="my-desc">
            <div class="my-exerpt">
                Sample Paragraph.
            </div>
        </div>
    </div>
</div>
</body>
</html>

Share this article

Leave a Reply