Limited borders on the corners of a rectangle

Hi there,

There are borders on the four side - I want to give it a try, which CSS property should I use to ake such thing happen.

One way would be to use :before and :after on the first element and absolutely place two square boxes that only have borders on 2 sides.

Then repeat that process for the last element.

There’s probably a way to do it with linear gradients on a border-image property but that’s probably too complicated.

1 Like

You could use a clip-path like this:

2 Likes

That’s very good. I wish I’d thought of it :slight_smile:

1 Like

Here’s a version with CSS variables (custom properties) where you can set the border width and the percentage length of the visible corners. It also demonstrates that corners may be rounded if desired.

2 Likes

Just noticed I am seeing artefacts as certain window sizes on that demo (in Chrome).

Here’s a screenshot and you can see the right and bottom borders showing a 1px border.

Screen Shot 2022-02-18 at 16.22.39

It seems you can offset that by subtracting 3px instead of 3px your calc.

clip-path: polygon(
    0 0,
    20% 0,
    20% 2px,
    80% 2px,
    80% 0,
    100% 0,
    100% 20%,
    calc(100% - 3px) 20%,
    calc(100% - 3px) 80%,
    100% 80%,
    100% 100%,
    80% 100%,
    80% calc(100% - 3px),
    20% calc(100% - 7px),
    20% 100%,
    0 100%,
    0 80%,
    2px 80%,
    2px 20%,
    0 20%
  );

I’m guessing it’s just the usual rounding error that browsers are prone to.

2 Likes

Well spotted!

Yes, subtracting 3px sorts it out (but would slightly affect any background colour fill),

I think it’s because browsers work to thousanths of a pixel. I’ve never reaally understood why :grinning:. Arguably the artefacts are a Chrome bug.

I think an alternative fix would be specify both width and height of the box together with box-sizing: border-box;.

2 Likes

Yes I’ve seen them before especially in transforms and they can be a nuisance.

I think the main culprit is the percentage padding and px padding seems to be fine. I love the technique though as it is much more elegant than alternative solutions (see below). :slight_smile:

Just for fun I had a go with the border-image and linear gradients but it turned out a little complex and still needed :before and :after to complete it.

I only post it for example as another way to approach this.

The demo by @Archibald is far more elegant and less code also.:slight_smile:

1 Like

Just use

element {
 ...
 border-radius:10px;
 ...
}

or how much px you want. The higher number of px, the rounder the border will be.

1 Like

I may be missing the obvious but does the above have something to do with this thread as I don’t understand how it relates to the OPs question?

2 Likes

@PaulOB Every decent rewndering engine ( mozilla not included as its ancient ) renders rounded corners as limited corners.

1 Like

I was wondering about having a go at doing it all as an SVG of fixed dimensions. However that’s probably only suitable where the text is unlikely to be updated.

2 Likes

Basically you can’t avoid it. Let’s say I want something be 25% of the viewport width. Let’s say the viewport width is 910 pixels. Then the width would be 0.25 * 910 = 227.50. Oops. What to do now? We either need to round up or round down.

That’s part one, it’s inherent to the problem being solved. You can’t get rid of it.

Part two is that computers are really fast at floating point calculations (roughly, every number that has a comma), but they are fast because they are sloppy and make tiny mistakes. You normally wouldn’t notice them, but once in a while (like the example in this thread), you do.

So that only compounds the first problem.

The solution is usually indeed to overcompensate for the error, like @PaulOB did.

3 Likes

Many thanks for your explanation. I had been using Firefox so had not seen any artefacts.

We don’t need to round up or down. A browser could use anti-aliasing to render a box of width 227.5 pixels. However close inspection of the borders in my CodePens shows that the box is not anti-aliased so is rendered with integer dimensions in both Firefox and Chrome.

I think Chrome is applying the clip-path to the computed floating point dimensions whereas Firefox is applying the clip-path to the rendered rounded-down integer dimensions. That would explain the artefacts in Chrome.

Has the sloppiness been proven or is this just folklore? I am prepared to accept that browsers or graphics cards may use fairly limited precision floating point calculations when rendering. I don’t believe the artefacts seen in Chrome are due to tiny mistakes.

2 Likes

I’m still not following how this relates to the question in hand but I may be having an off-day :slight_smile: Can you show a demo of the four partial corners using the method you propose?

2 Likes

I’m surprised no one has gone for the really obvious, simple answer to this, so I’ll throw it in for fun: just using multiple background images.

5 Likes

Nice to see you around Ralph and thanks for the extra method :slight_smile:

Your example of multiple images has prompted me to use multiple radiant gradients and lose the http request and get variable length borders and colours into the equation.

(The code looks more complicated than it is due to the custom variables but they simply make it easier to change the color and line length in one simple rule change. It’s basically four linear gradients).

3 Likes

Thanks Paul. I guess my post was the good version of poking the bear. :stuck_out_tongue:

4 Likes

Too much time on my hands today :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.