Any way to declare a size/partial border to a box?

css border
border length css
half border css
set length of bottom border
css partial circle border
partial border-radius css
inset border css
border-top-width length

Any way to declare a size/partial border to a box in CSS3? For example a box with 350px that only shows a border-bottom in its firsts 60px. I think that might be very useful.

Examples:

Not really. But it's very easy to achieve the effect in a way that degrades gracefully and requires no superfluous markup:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}
<div></div>

Shorten the Length of the Border-Bottom With Pure CSS, This method of shortening the border-bottom is truly pure CSS. There isn't a way to declare the length of a border, but I found a pretty slick work If you ever need any assistance with CSS, HTML, PHP, jQuery or WordPress just My strengths are in solving complex problems and thinking outside the box. Any way to declare a size/partial border to a box? 506. Placing border inside of div and not on its edge. Hot Network Questions Edit fasta header using sed

I know, this is already solved and pixels were requested. However, I just wanted to share something...

Partly underlined text elements can easily achieved by using display:table or display:inline-block

(I just don't use display:inline-block because, yeah you know, the awkward 4px-gap).

Textual Elements

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}
<h1>Foo is not equal to bar</h1>

box-sizing, The box-sizing property in CSS controls how the box model is handled This example image compares the default content-box (top) to border-box (bottom): exceeds the declared width when the padding and border are added to the This is the best way to post any code, inline like `<div>this</div>` or  Any way to declare a size/partial border to a box? (5 answers) Closed 4 days ago. I want output as follows btw

Here is another solution that rely on linear-gradient where you can easily create any kind of line you want. You can also have multiple lines (on each side for example) by using multiple background:

.box1 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(to right, transparent 20%, #000 20%, #000 40%, transparent 40%) 0 100% / 100% 3px no-repeat, 
    #ccc
}

.box2 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat, 
    #ccc
}

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
    linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat,
    linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat,
    linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat,
  #ccc
}
<div class="box1">
  Box1
</div>
<div class="box2">
  Box2
</div>
<div class="box3">
  Box3
</div>

Box Sizing, The box-sizing property can make building CSS layouts easier and a lot more intuitive. Some people preferred this “quirky” interpretation of the box model and of an element's declared width or height to accommodate its padding and border. This demo shows how border-box can help make responsive layouts more  Help Center Detailed answers to any questions you might have bookcasey. CSS and HTML! 3 and 5! 0. 146 Any way to declare a size/partial border to a box?

I used a grid to build draw some of the borders.

See here.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive partial borders</title>
    <style>
        /* ungrid without mobile */
        .row{width:100%;display:table;table-layout:fixed;}
        .col{display:table-cell;}

        /* things to change */
        .row{width: 70%; margin: auto;}
        .mid.row > .col{ height: 150px; }

        /* draw box and align text */
        .col{ text-align: center;}
        .top.left.col{
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .top.right.col{
            border-top: 1px solid black;
            border-right: 1px solid black;
        }
        .bottom.left.col{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }
        .bottom.right.col{
            border-bottom: 1px solid black;
            border-right: 1px solid black;
        }
        .mid.row > .col{
            border-left: 1px solid black;
            border-right: 1px solid black;
            vertical-align: middle;
        }
        .top.center.col{
            position: relative;
            top: -0.5em;
        }
        .bottom.center.col{
            position: relative;
            bottom: -0.5em;
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="top left col"></div>
        <div class="top center col">Top</div>
        <div class="top right col"></div>
    </div>
    <div class="mid row">
        <div class="col">Mid</div>
    </div>
    <div class="row">
        <div class="bottom left col"></div>
        <div class="bottom center col">Bottom</div>
        <div class="bottom right col"></div>
    </div>  

</body>
</html>

Learn About CSS box-sizing: CSS Border Box Explained, Learn how to make custom CSS border box and use box-sizing with our CSS Tip: border-box is the best choice for designing layouts and managing the sizes of HTML elements. Try dragging the bottom right corner! Work lines scored significantly higher than show lines on responsiveness in Labrador Retrievers, (Mann-Whitney U test, p < 0.012, Fig. 2, Supplementary Table S7) and in Border Collies as well

CSS does not support partial borders. You'd need to use an adjacent element to simulate this.

Partial Borders with CSS, There is no such thing as border-length in CSS, which would have made this really easy to do. But anyway, if you want to have partial borders  Data sets collected at higher magnification can reveal details of the cellular structure of cardiomyocytes, for example, the image with the brown border is a portion taken from an SBF‐SEM data stack (murine left ventricle) with a voxel size of ~13.3 nm in the X:Y plane and 50 nm in the Z‐direction.

CSS box-sizing property, border-bottom-color border-bottom-left-radius border-bottom-right-radius Include padding and border in the element's total width and height: The box-​sizing property defines how the width and height of an element are Inherited: no. Once authorized and posted can not be modified in any way. +<br><br> +Expense authoritation +<br><br> +Supervisor will need to authorize expenses and cash assignemnts reported. +<br><br> +In script PcAuthorizeExpenses.php the supervisor must select a tab he/she is supervising +<br><br> +If there is any assignment or expense not

Box model, and optional surrounding padding , border , and margin areas; the size of each The four border edges define the box's border box . margin edge or outer edge Each edge may be broken down into a top, right, bottom, and left edge. These properties apply to all elements, but vertical margins will not have any effect on  But my goal is to use the API the way it is intended to be used, without any optimizations other than those already provided. Answer1: however that would mean I need to update SourceText on each char, which allocates an array of TextChange, a new SourceText and potentially other things depending on its internal structure

box-sizing, The box-sizing property is used to alter the way sizing of an element occurs with In fact, using box-sizing: border-box; is now (kind of) considered a best practice​. A universal declaration (you may need to add vendor prefixes): margin-​bottom: 30px; padding: 10px; width: 200px; height: 200px; float: left;  Two-way ANOVA showed a statistically significant interaction effect between growth restriction and fetal sex on placental CYP19A1 [F (2, 22) = 5.27, p = 0.01] with a large effect size (Partial η 2 = 0.32). This suggests that the effect of IUGR on CYP19A1 levels might also depend on fetal sex.

Comments
  • Nothing like being marked the right answer without +1'd. But I +1'd you! This was a perfect solution for my problem. Thanks! edit I guess you could have been +1'd be OP and -1'd by someone else. Oh well. I appreciate your answer, and that's all that matters, right ;-)
  • How do you get this to be in the center, like in his second example?
  • I should add, when the parent element is a fluid-width inline-block element. Obviously when it's fixed width it's easy.
  • Nevermind, I got the effect I wanted - dabblet.com/gist/e5a78f2d4bf50b6be4d3. It's a shame the ::outside and ::inside pseudo-elements aren't available yet, I hate putting in markup just for styling, but I don't think there is any other way.
  • This works! To use it with React, you cannot use content in :after as inline style or JSS, but it works fine using styled components.
  • Great answer. For the :after I like more a margin: 0 auto approach instead the margin-left: 25% because it will work with any width you declare without need to do maths.
  • @davidmatas Good point! I've just used the mathy-way to clarify how to position it manually by hand. With this example anyone could understand how to align it left/center/right. Anyway, I will add the auto-simplificator :)
  • Wow... I've been fiddling for hours to find a way to have only the upper left and upper right corner of an "implied" box showing. :before and :after was too limited, it messed up the object's positioning. This is a brilliant solution!
  • Some background information on why and how this works: webfx.com/blog/web-design/background-css-shorthand
  • @SverriM.Olsen since the person edited the code, the comment is obsolete
  • Or a pseudo-element, which you can do entirely with CSS and not add any markup, as illustrated by the answers above