Transparent gap separating div and border with curvature

I am attempting to achieve a specific look for my button:

I have experimented with using outline, but unfortunately I am unable to apply border radius to the outline. I have also tried using a box shadow with a white border, but I need the border to be see-through. Any suggestions or solutions would be greatly welcomed.

It seems I can't adjust the border radius of the outline using the following code:

.btn {
  outline: 1px solid #B54104;
  outline-offset: 1px;
}

The visible gap between the outline and button is not transparent in the following snippet:

.btn {
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #c5170a;
}

The space between the button and the outlined offset must be completely transparent.

htmlcss

Answer №1

One suggestion is to experiment with different background color options using the background-clip property to prevent coloring a specific part of the button:

.button {
  display:inline-block;
  padding:3px; /*adjust the spacing*/
  width:100px;
  text-align:center;
  line-height:30px;
  border-radius:15px;
  color:#fff;
  border:2px solid orange;
  background: orange content-box; /*applies color only to the content area*/
}

body {
 background:pink;
}
<div class="button">
button
</div>

A similar method involves using padding-box and managing spacing with border:

.button {
  display:inline-block;
  width:100px;
  text-align:center;
  line-height:30px;
  border-radius:15px;
  color:#fff;
  border:5px solid transparent; /*adjust the spacing*/
  background: orange padding-box; /*does not color the border*/
  box-shadow: 0 0 0 2px orange; 
}

body {
 background:pink;
}
<div class="button">
button
</div>

Answer №2

border-radius is now fully compatible with outlines.

.btn {
  display: inline-block;
  margin: 20px;
  padding: 15px 30px;
  background-color: #b54204;
  border-radius: 5px;
  color: #fff;
  outline: 2px solid #b54204;
  outline-offset: 4px;
}
<div class="btn">
  BUTTON
</div>

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

- Determine if a div element is already using the Tooltipster plugin

I have been using the Tooltipster plugin from . Is there a way to check if a HTML element already has Tooltipster initialized? I ask because sometimes I need to update the text of the tooltip. To do this, I have to destroy the Tooltipster, change the tit ...

javascriptjqueryhtmlcsstooltipster

When the class is not present, simply scroll to the specified div

Having trouble getting the jQuery scroll to function properly in the following code snippet. Essentially, I want to display a button named #checking when the class k.state-disabled is not active. After the button is displayed for the first time, I aim to ...

jqueryhtmlcss

The feature of interpolation within attributes has been eliminated. Please use either v-bind or the colon shorthand in its place

I am struggling to grasp how I can pass a value to Vue using HTML. I keep encountering this error message: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. Edit: I am trying to pass the value "country" to the Vu ...

htmlvue.js

Nested divs with independent scrolling capabilities

I am interested in developing a gantt chart that displays days, months, and years at the top with tasks listed below. Here is my progress so far: https://i.stack.imgur.com/tr5y4.png In the image above, the scroll-x functionality works on everything incl ...

htmlcssscrolloverflowparent-child

Create a layout with three columns, each containing four list items

My unordered list (ul) has 4 li's and I'm trying to create 3 columns. However, when I have 4 li's, it only displays as 2 columns. How can I achieve a layout with 3 columns and 4 li's? Additionally, I want the li elements to be arranged ...

htmlcss

Using JavaScript to replace static placement

I'm looking to implement a floating navbar on my website, the kind that scrolls down with you and stays at the top of the window. However, I've run into an issue with certain Android versions (like 4.3) when using the fixed position. My navbar w ...

androidjquerycssfixednavbar

What is the best way to combine two sections in html/css/bootstrap?

I've been trying to create a simple webpage with a navigation bar and a section below it, but I keep running into an issue where there's unwanted white space between the nav bar and the next section in blue. Is there a way to eliminate this gap a ...

javascripthtmlcssbootstrap-4

Struggling to understand why my React Component is failing to render properly

Could there be an issue with how I imported react or am I simply overlooking something small? Any feedback would be greatly appreciated. As a beginner in programming, I may be missing a simple solution that I'm not experienced enough to identify. Than ...

javascripthtmlreactjs

Rejuvenate your Bootstrap Accordion with these Settings

Using bootstrap documentation, I have implemented an accordion in my web application with the following code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

To optimize your bundling process, include the leaflet.css file from the node_modules/leaflet directory using webpack

Currently, I am working on developing a map application using webpack and leaflet. While I can successfully require leaflet.js from my map.js file, I encounter an error when trying to call leaflet.css. The configuration in my webpack.config.js is as follo ...

cssnode.jsnpmleafletwebpack

Upload the PDF file along with other form data in a React application

I'm currently facing an issue with using formData for submitting a pdf file const [file,setFile] = useState() const [isFilePicked, setIsFilePicked] = useState(false); I have an input of type file <input accept=".pdf" type="file&quo ...

javascripthtmlreactjsformsform-data

Looking for assistance with HTML regex (even though I understand it's not the recommended approach)

Before we dive in, let me just say that I'm using this regex to work around a bug while waiting for the server team to address it. The issue is that I'm receiving JSON with unescaped " characters within HTML. I need a regex that can identify the ...

htmlregexjson

What is the best way to pinpoint a specific Highcharts path element?

I am currently working on drawing paths over a graph, and I am looking to dynamically change their color upon hovering over another element on the page - specifically, a list of data points displayed in a div located on the right side of my webpage. Below ...

javascriptjqueryhtmlcsshighcharts

Delaying Jquery on scroll Event

Hey there, I've got a set of icons that I'd like to reveal one by one as you scroll down. I've incorporated some animations from , but now I'm wondering how I can implement a delay function in my jQuery so the icons appear sequentially ...

javascriptjqueryhtmlcss

the sorting process took a turn for the worse

I am new to XSL. I am attempting to organize a list of books based on the 'number of pages'. I have created a simple XSL file for this purpose, but the output is not as expected. Some elements are sorted while others remain unsorted. What could b ...

xmlhtmlxslt

error in URI (not a valid URI):

Encountering an issue with a URI that is triggering a bad URI error. http://localhost:3000/api/v1/company_donations.json?token=foo&donation={&amount=101}&comment=Ordered The goal is to have the URL carry 2 attributes Token Donation obje ...

htmlruby-on-railsurl

`Weaving mesh into place with three.js`

I'm struggling to grasp how to position my cubes on the canvas. I can't quite figure out how positioning actually works. I'm trying to find a way to determine if my mesh reaches the limits of the canvas. But what exactly is the unit of posit ...

javascripthtmlcanvasthree.js

Icons disappear from the navbar toggle when clicked on a small screen

Using Django and Bootstrap 4, I've created a navbar with a toggle feature. However, when viewed on a small screen, the toggle button does not display the icons as expected. Instead, it shows empty lines. Strangely, when the phone is rotated, the toggl ...

htmlcssdjangotwitter-bootstrapbootstrap-4

Issue with clearTimeout function not functioning properly on keyup event in iFrame

While there may be many similar questions out there, I have yet to find a solution that works for me. Currently, I am developing a WYSIWYG editor and I want it to save when the user performs a keyup action. However, I do not want it to update after every ...

javascriptjqueryhtmliframe

Is there a way to allow only the block code to shift while keeping the other span tags stationary?

Is it possible to change the text without affecting other span tags in the code? I want to make sure only this specific text is updated. How can I achieve that? var para_values = [ { content: "BRAND " }, { content: "MISSION" } ]; functi ...

javascripthtmlcss