CSS for border in corners only

Question

I need ideas on how to make a button look like this:

I don't know how to make square corners like that and I can't find any solutions online. Also, on hover, the border should be all around the button (just a normal 2px border.)

Have you considered using a background image for the buttons? — Ananth Rao, Mar 15 '17 at 16:55
The fastest way is to just paint it out in photoshop or something. About the mouseover: https://www.w3schools.com/cssref/sel_hover.asp — Oscar Lundberg, Mar 15 '17 at 16:57
You can use a div with above image as background and define onclick function. You can do whatever you want in the onclick function.... — Mohammed Shareef C, Mar 15 '17 at 17:04
Thanks but I don't want image as background or image as border because i need css transition effect for border, i think Santi wrote a good solution below — user3633459, Mar 15 '17 at 17:13

Tyler Roper · Answer 1 · 2017-03-15T18:39:29.103

Here's a pure CSS solution using absolutely positioned pseudo-elements, meaning you wouldn't have to create any images. What this method does is actually create four elements inside the button. Those elements are positioned in each of the four corners and given a border on two sides.

Non-fancy, no transition: (Give the button a border on hover)

body {
    background-color: black;
}

button {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
    box-sizing: content-box;
    border: 2px solid transparent;
}

button::before, button::after, span::before, span::after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
}

button::before {
    top: -2px;
    left: -2px;
    border-top: 2px solid white;
    border-left: 2px solid white;
}
button::after {
    top: -2px;
    right: -2px;
    border-top: 2px solid white;
    border-right: 2px solid white;
}
span::before {
    bottom: -2px;
    left: -2px;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
}
span::after {
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
}

button:hover {
  border: 2px solid white;
}

<button><span>BUTTON</span></button>

Fancy, with transition: (animate our pseudo-elements to occupy the full height/width of the button)

body {
    background-color: black;
}

button {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
    box-sizing: content-box;
    border: 2px solid transparent;
}

button::before, button::after, span::before, span::after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
}

button::before {
    top: -2px;
    left: -2px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: 0.5s all;
}
button::after {
    top: -2px;
    right: -2px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transition: 0.5s all;
}
span::before {
    bottom: -2px;
    left: -2px;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    transition: 0.5s all;
}
span::after {
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transition: 0.5s all;
}

button:hover::before, button:hover::after {
    width: 50px;
    height: 50px;
}

button:hover span::before, button:hover span::after {
    width: 50px;
    height: 50px;
}

<button><span>BUTTON</span></button>

I think this will be good, many thanks! – user3633459 Mar 15 '17 at 17:14 — user3633459, Mar 15 '17 at 17:14

score 0 · Answer 2 · answered Mar 15 '17 at 17:06

0

Offhand, I can see two ways to do this.

The first way is by using CSS's border-image to slice up an image into slices and use it as the border. You'll create an image that has the four square corners in the upper left, upper right, lower left, and lower right, and then control how the image is divided into the nine quadrants.

It'll depend on your source image, but see here for an example usage and example image: https://www.w3schools.com/cssref/css3_pr_border-image.asp

The second is by having four elements and positioning them outside the button box. This is more work and not necessary, so I'd go with the first method.

answered Mar 15 '17 at 17:06

Bemisawa

248
2
9

Just make sure you use the vendor prefixes - otherwise your coverage will only be decent. http://caniuse.com/#feat=border-image – Bemisawa Mar 15 '17 at 17:09
Thanks but I don't want image as background or image as border because i need css transition effect for border, i think Santi wrote a good solution below – user3633459 Mar 15 '17 at 17:14

score 0 · Answer 3 · answered Mar 15 '17 at 18:20

You can use the svg tag to make the corners. something like this:

<!DOCTYPE html>
<html>
<body>

<h1>My SVG</h1>
<div style = "position:absolute; top: 280px; right: 100px; background-color:blue;">
<svg width="200" height="100">
  <line x1="5" y1="5" x2="25" y2="5" stroke="green" stroke-width="4"/>
  <line x1="5" y1="5" x2="5" y2="25" stroke="green" stroke-width="4"/>
</svg>
</div> 
</body>
</html>

this will make a blue box with a green corner on the upper left hand side. You can add the other three corners. You could then use css to put a rectangle over the top when you hover over the button.

CSS for border in corners only

3 Answers3