I would like to create a border for the radial gradient and apply it to the div as well

Question

I would like to create a border for the radial gradient and apply it to the div as well

Below is the CSS code I have written.

div {
  height: 150px;
  margin: 5em 2em;
  background: radial-gradient(circle at top center, transparent, transparent 70px, black 70px, black);
  border-radius: 8p## Heading ##x;
  position: relative;
}

.circle {
  width: 120px;
  height: 120px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url(http://www.fillmurray.com/1000/1000);
  background-size: cover;
}

<div>
  <span class="circle"></span>
</div>

<!--  this creates the cut in a div placing a circle on the cut and i need to put a border for the whole div even in the cut part of div.  -->

javascript jquery html css

Answer 1

Answer №1

Is this the kind of design you were looking for?

div {
  height: 150px;
  margin: 5em 2em;
  background: radial-gradient(circle at top center, transparent, green 70px, black 70px, black);
  border-radius: 8p## Heading ##x;
  position: relative;
  border: 10px solid green;
}

.circle {
  width: 120px;
  height: 120px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url(http://www.fillmurray.com/1000/1000);
  background-size: cover;
}

<div>
  <span class="circle"></span>
</div>

<!--  This code snippet shows how to create a div with a circle cut out, and how to add a border to the entire div, even in the cut-out section. -->

Answer 2

Is this the kind of design you were looking for?

div {
  height: 150px;
  margin: 5em 2em;
  background: radial-gradient(circle at top center, transparent, green 70px, black 70px, black);
  border-radius: 8p## Heading ##x;
  position: relative;
  border: 10px solid green;
}

.circle {
  width: 120px;
  height: 120px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url(http://www.fillmurray.com/1000/1000);
  background-size: cover;
}

<div>
  <span class="circle"></span>
</div>

<!--  This code snippet shows how to create a div with a circle cut out, and how to add a border to the entire div, even in the cut-out section. -->

I would like to create a border for the radial gradient and apply it to the div as well

Answer №1

Similar questions

Guidance on Implementing Promises in Ionic 2 and Angular 2

Setting up jsdoc on a computer with slow internet access can be a bit tricky, but with

The many potentials of looping through Sass maps

What are the steps to limit entry to a page in Rails unless the user has come through a designated link on another page?

Manipulate component properties using CSS hover in React with Material-UI

Ways to dynamically navigate to the end of a webpage following an AJAX request

In order to manage this file type properly, you might require a suitable loader, such as an arrow function within a React

Please refrain from refreshing the page multiple times in order to receive updated data from the database

Transmit a JSON object to the server using a JavaScript function

Tips for resolving flickering animations in CSS and JavaScript

How come my jQuery isn't updating the class of a specific element?

Tips for building a modal box with HTML, CSS, and jquery!

In pursuit of increased speed

Styling nested divs in CSS

Implementing jQuery getScript in a Ruby on Rails 3 application

Efficient jQuery code for switching images based on multiple class attributes

Having trouble getting the img src to work in Django 2.1 template?

Enhance your Next.js routing by appending to a slug/url using the <Link> component

Is it possible to determine if a style property has been altered

Suggestions for the AJAH Library