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

Is your Ajax jQuery live search not functioning properly with JSON data?

My programming code is not functioning properly. Here is the file I am working on. When it does work, it does not display the list and gives an error in the Json file. I am unsure of the reason behind this issue. You will be able to view the error in the C ...

javascripthtmlcssjson

Is it possible to implement CSS code from a server request into a React application?

With a single React app that hosts numerous customer websites which can be customized in various ways, I want to enable users to apply their own CSS code to their respective sites. Since users typically don't switch directly between websites, applying ...

javascriptcssreactjs

Creating a chic look for your conditional statement: If Else Styling

While it may not be possible to directly style PHP code, you can definitely style the HTML output that PHP generates. I'm curious if there's a way for me to apply styles to the output of an IF ELSE statement. if ($result != false) { print "Y ...

phphtmlcss

How can we target every nth child element universally?

I am working with an HTML structure that has a specific layout, and I need to target all odd <span> elements globally without considering their parent elements. Is there a way to style 1, 3, 5, 7, 9 in red color? I attempted to use :nth-child(odd) b ...

htmlcsscss-selectors

Achieve the highest character count possible within HTML elements

Is it possible for a standard HTML element with defined width and height to manage characters using JavaScript, as shown in the code snippet below? <div id="text-habdler-with-width-and-height" ></div> <script> $("element& ...

javascripthtmlcss

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

javascripthtmlcssreactjs

After applying the rotateY function, the z-index appears to be malfunctioning

My current project involves creating a page flip effect, which requires two overlapping div elements. Initially, both divs are side by side with the second div having a -webkit-translateY(180deg) property applied to it. The first div has a z-index of 2, wh ...

htmlcss

Struggling to change h2 style on WordPress?

In a WordPress page, I create three heading texts and adjust the CSS when the screen width is less than 820px. Here is the code snippet: <h1 class="block-h1">Heading 1</h1> <h2 class="block-h2">Heading 2</h2> <h3 class="block-h3 ...

csswordpress

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Trying to apply a filter effect using CSS but encountering issues in Firefox: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80 ) opacity: 0.5; -moz-opacity: 0.5; Any s ...

cssfirefox

Ensure that the div is styled with a white background and positioned next to another div with a right margin

I have a white-colored div that needs to be positioned next to another element on a webpage. Additionally, I need a paragraph placed on top of this div for information purposes. Please refer to the following link to see what I am trying to achieve: body ...

htmlcss

Add a new division to a component when a specific event handler is triggered by another component using React and the reduce method

Currently, I am developing an interactive drag-and-drop application using React and Redux. My goal is to insert a new div element into a container when the ondragstart event handler is triggered by a component. The component responsible for the dragging o ...

javascripthtmlcssreactjsredux

In what way can I obtain CSS comments utilizing jQuery?

I am trying to figure out how I can access CSS comments that are included in an external stylesheet. In order to demonstrate, I have loaded a sample CSS using the following code: <link rel="stylesheet" type="text/css" media="all" href="test.css" /> ...

jquerycsscomments

How I disabled scrollbars in my HTML/CSS while implementing the Progid Microsoft gradient

IMPORTANT: Please read the latest update at the end of the question! Check out this snippet from my HTML/CSS code: html { height: 100%; } body { height: 100%; margin: 0px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699 ...

htmlcssinternet-explorer

Image Not Displayed on Page

I am facing an issue where I have a div class 'breadcam_bg' with an image url, but the image is not being displayed on the page even though the console detects the div. html <div class="bradcam_area breadcam_bg"> This div! & ...

htmlcsssass

When the CKEDITOR is set to fullPage mode, it cannot properly apply styles from an external stylesheet that is configured in the config.contentscss setting

To create a custom StyleSet in CKEditor using styles from an external stylesheet, I configured the settings as follows: config.extraPlugins = 'stylesheetparser'; config.contentsCss = '/css/externalStyleSheet.css'; config.stylesSet = [ { ...

cssiframeckeditorckeditor4.x

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...

javascriptjqueryhtmlcss

The dark mode class in Next.js/React does not take effect until a local change is made

I've been diving into a helpful tutorial on implementing dark mode toggle in my project. The tutorial uses react-toggle and can be found here. Everything seems to be working fine except for one issue that arises on the initial page load. When the bro ...

htmlcssreactjsnext.js

Troubleshooting problems with the width of a Bootstrap navbar

I'm encountering a frustrating issue with my bootstrap menu. When I include the "navbar Form" in the menu, the width of the menu extends beyond the screen width in mobile mode (when resizing the browser window or viewing on a mobile device). Interesti ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

What is the method for activating the on collapse event with a bootstrap navbar?

I am encountering a common issue with collapsing the navbar on smaller screens and triggering an event when the collapse button icon is clicked. Despite my efforts to find a solution, I have been unsuccessful in using the following JavaScript code: $(&apos ...

javascripthtmljquerycss

Enhance Your Website with HTML and JavaScript

Here is the code snippet I am working with: sTAT **javascript** var acc = document.getElementsByClassName("item-wrapper"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("selected"); this.nextElementS ...

javascriptjqueryhtmlcss