Html Question posted in
Some basic documentation can be found here.

Html – How can I wrap borders partway around three sides of an element?

I need a complex border for an anchor element. Unfortunately I can only solve the whole thing with CSS classes of the anchor element because I don’t have any options for the layout.

I already tested it with background linear-gradient but I didn’t reach a satisfactory result.

Here is an image as it should look, regardless of the font size and length of the text.

enter image description here

:root {
  --gb-nav-btn-color-hover: red;
}

a {
  border-radius: 0px;
  display: block;
  line-height: 30px;
  width: fit-content;
  height: fit-content;
  padding-right: 25px;
  background: linear-gradient(to bottom, var(--gb-nav-btn-color-hover) 2px, transparent 2px) 2px 0px, linear-gradient(to left, var(--gb-nav-btn-color-hover) 2px, green 2px) 0px -7px;
  background-repeat: no-repeat;
  background-position: center, center, center;
}
<a href="">An anchor element</a>
Tags:

3

Answers


  1. 0 
    a {
  display: inline-block;
  padding: 8px 0; 
  position: relative;
  text-decoration: none; 
  color: black;
}

a::before,
a::after {
  content: '';
  position: absolute;
  height: 2px; 
  background: black;
}

a::before {
  top: 0;
  left: 0;
  right: 0;
}

a::after {
  bottom: 0;
  left: 100%; 
  width: 100px;
}
    <a>Home</a>

    I hope this helps you

    Login or Signup to reply.
  2. 0

    Pseudo-elements to the rescue. I’ve used em units (per Roko C. Buljan‘s helpful reminder) to keep the various aspects of the design in proportion to the font size.

    Also, I’ve put some common values in custom properties for easy configuration.

    :root {
  --descender-height: 0.215em;
  --end-padding: 0.45em;
  --border-width: 0.07em;
}

a.fancy {
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 48px;
  color: black;
  padding-right: var(--end-padding);
  border-top: var(--border-width) solid;
  position: relative;
}

a.fancy::before,
a.fancy::after {
  content: '';
  position: absolute;
  background: black;
  width: var(--border-width);
  height: calc(100% - var(--descender-height));
  right: 0;
}

a.fancy::after {
  width: var(--end-padding);
  height: var(--border-width);
  bottom: var(--descender-height);
}

a.fancy.small {
  font-size: 32px;
}

a.fancy.very-small {
  font-size: 24px;
}

body {
  padding: 20px;
}
    <a href="" class="fancy">An anchor element</a>
<br><br><br>
<a href="" class="fancy small">An anchor element</a>
<br><br><br>
<a href="" class="fancy very-small">An anchor element</a>
    Login or Signup to reply.
  3. 0 
    .box {
  color: black;
  font-size: 2rem;
  border-left: none;
  display: inline-block;
  border-top: solid 3px black;
  box-sizing: border-box;
  font-family: Arial;
  height: 30px;
}

.box__link {
  display: inline-block;
  height: 100%;
  text-decoration: none;
  color: black;
  margin-left: -2.5px;
}

.box__link::after {
  width: 28px;
  border-bottom: solid 3px black;
  content: ' ';
  display: inline-block;
  position: relative;
  border-right: solid 3px black;
  height: 100%;
  margin-left: -6.5px;
  margin-bottom: -0.2px;
}
    <div class="box">
    <a href="#" class="box__link">Home</a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search