Step-by-step guide on achieving rounded borders with a gap:

Struggling to design blocks and elements with rounded corners that have a gap between the corner and the straight line. It's proving to be quite challenging :)

Additionally, I need to create buttons that look like this,

and

If CSS alone doesn't work, I might resort to using SVGs, but I need to figure out the initial issue first.

Any suggestions or ideas?

css

Answer №1

This situation calls for the use of a border-image.

const grab = document.getElementById('grab');
console.log("url('data:image/svg+xml;base64,"+btoa(grab.innerHTML.replace(/\r?\n */g,''))+"')");
.border-gap {
  border: 16px solid;
  border-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIGQ9Ik0xLDEzIEExMiwxMiAwIDAgMSAxMywxTTE5LDEgSDI5TTM1LDEgQTEyLDEyIDAgMCAxIDQ3LDEzTTQ3LDE5IFYyOU00NywzNSBBMTIsMTIgMCAwIDEgMzUsNDdNMjksNDcgSDE5TTEzLDQ3IEExMiwxMiAwIDAgMSAxLDM1TTEsMjkgVjE5Ij48L3BhdGg+PC9zdmc+') calc(100% * 19 / 48);
  padding: 8px;
}
<div class="border-gap">Text</div>

<template id="grab">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
    <path stroke="black" stroke-width="2" stroke-linecap="round" fill="none" d="
      M1,13 A12,12 0 0 1 13,1
      M19,1 H29
      M35,1 A12,12 0 0 1 47,13
      M47,19 V29
      M47,35 A12,12 0 0 1 35,47
      M29,47 H19
      M13,47 A12,12 0 0 1 1,35
      M1,29 V19
    " />
  </svg>
</template>

The provided SVG and method for obtaining a data: URL for it are also included, which can then be applied to the border-image.

Answer №2

Utilizing masks can offer the following benefits:

.box {
  --r:40px; /* radius*/
  --g:5px; /* gap */
  
  width:200px;
  height:100px;
  display:inline-block;
  border:5px solid red;
  box-sizing:border-box;
  margin:10px;
  border-radius:var(--r);
  --m:#0000 90deg,#000 0; 
  -webkit-mask:
    conic-gradient(from -180deg at calc(100% - var(--g)) var(--g)            ,var(--m))
        0    100%/var(--r) var(--r),
    conic-gradient(from  90deg at var(--g)              var(--g)             ,var(--m))
        100% 100%/var(--r) var(--r),
    conic-gradient(from   0deg at var(--g)              calc(100% - var(--g)),var(--m))
        100% 0   /var(--r) var(--r),
    conic-gradient(from -90deg at calc(100% - var(--g)) calc(100% - var(--g)),var(--m))
        0    0   /var(--r) var(--r),
    linear-gradient(#000 0 0);
   -webkit-mask-repeat:no-repeat;
   -webkit-mask-composite:xor;
   mask-composite:exclude;
}
<div class="box"></div>
<div class="box" style="width:100px;--r:50px"></div>
<div class="box" style="width:150px;--r:50px"></div>

If you need to add content, consider using it as a pseudo element:

.box {
  --r:30px; /* radius*/
  --g:5px; /* gap */
  
  width:200px;
  height:100px;
  display:inline-block;
  box-sizing:border-box;
  padding:20px;
  position:relative;
  margin:10px;
}
 
.box:before {
  content:"";
  position:absolute;
  inset:0;
  border:5px solid red;
  border-radius:var(--r);
  --m:#0000 90deg,#000 0; 
  -webkit-mask:
    conic-gradient(from -180deg at calc(100% - var(--g)) var(--g)            ,var(--m))
        0    100%/var(--r) var(--r),
    conic-gradient(from  90deg at var(--g)              var(--g)             ,var(--m))
        100% 100%/var(--r) var(--r),
    conic-gradient(from   0deg at var(--g)              calc(100% - var(--g)),var(--m))
        100% 0   /var(--r) var(--r),
    conic-gradient(from -90deg at calc(100% - var(--g)) calc(100% - var(--g)),var(--m))
        0    0   /var(--r) var(--r),
    linear-gradient(#000 0 0);
   -webkit-mask-repeat:no-repeat;
   -webkit-mask-composite:xor;
   mask-composite:exclude;
}
<div class="box"> content </div>
<div class="box" style="width:100px;--r:50px">content </div>
<div class="box" style="width:150px;--r:50px">content </div>

Answer №3

Doing it the challenging way...

body {
  background: #232323;
}

.btn {
  border: 3px solid #fafafa;
  padding: 2px 12px;
  border-radius: 50%;
  background: transparent;
  position: relative;
}

.btn::before,
.btn::after {
  position: absolute;
  content: '';
  width: 3px;
  height: 5px;
  background: #232323;
  top: 40%
}

.btn::before {
  left: -10%;
}

.btn::after {
  right: -8%;
}

.btn:hover {
  border-color: #ff3844
}

.btn:hover .icon {
  color: #ff3844
}

.icon {
  color: #fafafa;
  font-size: 1.5rem;
  font-weight: bold
}

span {
  position: relative
}

span::before,
span::after {
  position: absolute;
  content: '';
  width: 5px;
  height: 4px;
  background: #232323;
  left: -2px;
}

span::before {
  top: -22px
}

span::after {
  bottom: -2px
}
<button class="btn">
  <div class='icon'>+</div>
  <span></span>
</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Continue scrolling once you reach the fixed-positioned div

live demo html <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> css .container{ margin: 0; padding: 0; ...

jqueryhtmlcss

Implementing a dynamic top navbar that transitions to the side on desktop with Bootstrap

I have been faced with the challenge of creating a responsive navigation bar that appears at the top on mobile devices and on the side on desktops. The issue arises when considering how to structure the rows and columns to achieve this. For mobile views, ...

htmlcsstwitter-bootstrapresponsive

Use the CSS property of display:none; on elements that have not been selected

There are multiple divisions on this page, and one of them has the class "active". I am looking to hide all the divisions except for the one with the "active" class. Can you provide me with the appropriate CSS selector for achieving this? ...

csscss-selectors

Using HTML, CSS, and jQuery to create a master-detail feature

I'm looking to implement a master-detail layout, so I decided to follow this tutorial for guidance: While trying to replicate the tutorial, I encountered an issue with my code. Here's the code snippet that I am working on: HTML/jQuery <!DO ...

javascriptjqueryhtmlcss

Struggling to add custom styles to an Ionic radio button

I'm struggling to adjust the position of the icon in an Ionic radio button so that it sits a bit higher, but I can't seem to figure out how to do it. Below is the code snippet for reference: // HTML <ion-radio class="radio-input" mo ...

cssangularionic-frameworksass

CSS translation animation fails to execute successfully if the parent element is visible

Inquiries similar to this and this have been explored, but do not provide a solution for this particular scenario. The objective is to smoothly slide a menu onto the screen using CSS translation when its parent is displayed. However, the current issue is ...

javascriptjqueryhtmlcss

Combining a background image and gradient in Internet Explorer: a comprehensive guide

I recently encountered a challenge while trying to apply a gradient and a background image to an element using CSS. After utilizing Colorzilla for the gradient, I obtained the following code snippet. background: rgb(250,250,250); background: -moz-linear-g ...

jquerycssinternet-explorergradient

Stop html text from overflowing container

I'm facing an issue with a Bootstrap container where the text inside is overflowing and not aligning properly. How can I ensure that the text stays within the container and doesn't cross over, instead just aligning at the bottom of the upper text ...

htmlcssbootstrap-5

Unable to identify the source of the additional white space appearing below the footer

Click here to access a page with two Google maps embedded. Upon scrolling to the bottom of the page, an unusual amount of whitespace is visible below the footer that is not seen on any other pages. The issue seems to be related to the presence of the two ...

css

Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version s ...

cssfont-face

How can I turn off the animation for a q-select (quasar select input)?

I'm just starting out with Quasar and I'm looking to keep the animation/class change of a q-select (Quasar input select) disabled. Essentially, I want the text to remain static like in this image: https://i.stack.imgur.com/d5O5s.png, instead of c ...

javascriptcssvue.jsquasar-framework

Steps for making a grid within a bootstrap 3 modal

I am new to HTML and CSS I'm working on creating a modal content similar to this: https://ibb.co/RvrhmRs Most of the work is done, but my modal currently looks like this: https://ibb.co/1zG0y2t I just need help arranging an icon next to the text. ...

htmlcsstwitter-bootstrap-3grid

What could be causing the undefined status of this length function?

I need to determine the length of seconds. If the second is only one character long, I want to add a 0 in front of it. Otherwise, no action is needed. Below is my code: <p>Click the button to show the current number of seconds.</p> <p id= ...

javascriptjqueryhtmlcss

ways to set a background color for a textarea element using bootstrap

How can I add a background color to my text area field in Bootstrap? <div class="form-group"> <div class="col-xs-12"> <textarea class="form-control" id="exampleTextarea" rows="6" placeholder="Message" style="background-color: #f ...

csstwitter-bootstrap

Tips for discovering the exact positions of child divs that are Nth siblings within a parent div

I have designed a new calendar interface with dynamic functionality. When the user clicks on any time slot displayed in IMAGE1, a span element is created dynamically to represent 8 hours starting from that clicked time. My question is, how can I access th ...

javascriptjqueryhtmlcss

Tips for Adjusting the Position of a DIV Element Slightly Upwards

I am having trouble positioning the home-link image in my hovering navigation bar. The URL to my blog is: . Ideally, I want the image to be aligned with the text tabs next to it, but no matter what I try, I can't seem to move the "home" icon up by abo ...

htmlcssblogger

How to activate a media query in response to user interaction using JavaScript

My responsive web page has various designs for different screen sizes, implemented using @media queries. I am interested in allowing users to manually adjust the design for smaller or larger screens without actually changing the screen size. Is there a wa ...

javascriptcssresponsive-designmedia-queries

Issues arise when attempting to animate letters using jQuery and CSS

My goal is to create a dynamic animation effect on a string when a user hovers over it. This involves turning the string into an array and applying different animations to each letter. Although the animations are working perfectly, I'm facing one issu ...

jqueryhtmlcssanimation

Can you provide instructions on how to insert a hyperlink onto a background image?

Is it possible to add a hyperlink to this background image without causing it to disappear? Would creating a new class in the stylesheet be the way to go? (I encountered an issue where the image disappeared when trying to call the new class). body{ back ...

htmlcss

What is the best way to ensure Font-Face loads fonts successfully on iOS devices?

In the process of constructing a website with Gatsby.js, Styled-Components, and a custom font named 'Montserrat', I encountered an issue regarding font loading. The font appears as expected on desktop browsers during both build and hot-reloading, ...

ioscssmobilefont-facestyled-components