I'm looking to add some borders to my image using bootstrap/CSS - does anyone know how this can be achieved

I have designed the UI, but I'm struggling to create the border effect shown in the image below:

https://i.sstatic.net/Jdp17.png

 <div>
     <img class='image1' src='https://www.w3schools.com/w3css/img_lights.jpg' />
     <img class='image2' src='https://www.w3schools.com/w3css/img_lights.jpg' />         
 </div>

Css

div {
   text-align: center
}
.image1 {
   border: 15px solid seagreen; 
   outline: 15px solid green;
   width:'150px';
   height:'150px';
   border-radius: 75%
}   
.image2 {
   border: 15px solid seagreen;
   position: relative;
   right:25px;
   width:'150px';
   height:'150px';
   border-radius: 75%
}
cssbootstrap-4

Answer №1

https://i.sstatic.net/WDtXA.png

The code you gave has been edited slightly.

.parent-div {
  margin-top: 100px;
}

div {
  text-align: center;
}

.image1 {
  border: 15px solid seagreen;
  width: 150px;
  height: 150px;
  border-radius: 75%;
  border-right-color: transparent;
}

.image2 {
  border: 15px solid seagreen;
  position: relative;
  right: 80px;
  width: 150px;
  height: 150px;
  border-radius: 75%;
  border-left-color: transparent;
}

.imageH {
  width: 150px;
  height: 150px;
  border-radius: 75%;
}

.ib {
  display: inline-block;
}

.left-img {
  position: relative;
  z-index: -15;
  width: 175px;
  height: 175px;
  border: 20px solid seagreen;
  border-radius: 75%;
  top: -200px;
  left: 17px;
  opacity: 0.3;
}

.right-img {
  left: -100px;
  opacity: 0.3;
  position: relative;
  z-index: -15;
  width: 175px;
  height: 175px;
  border: 20px solid seagreen;
  border-radius: 75%;
  top: -200px;
}
<div class="parent-div">
  <img class="image1" src="https://www.w3schools.com/w3css/img_lights.jpg" />
  <img class="image2" src="https://www.w3schools.com/w3css/img_mountains.jpg" />

  <div class="">
    <div class="left-img ib">
      <img class="imageH" src="https://www.w3schools.com/w3css/img_lights.jpg" />
    </div>
    <div class="right-img ib">
      <img class="imageH" src="https://www.w3schools.com/w3css/img_lights.jpg" />
    </div>
  </div>
</div>

You can customize the class names and images to suit your needs.

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

Ways to prevent a floated element from impacting text-align: center styling?

Within my code, there is a <p> element structured as follows: <div><p>Text Goes Here <span></span</p></div> The CSS I currently have is: div { text-align:center } span { float:right } An issue arises when I populate ...

htmlcss

I am experiencing difficulty with the color of my progress bar in Firefox

After successfully creating an interactive progress bar that works perfectly in Google Chrome and surprisingly also in Safari without vendor prefixes, I encountered a roadblock when testing it on Firefox. The progress bar color reverts back to the default ...

javascriptcsshtmlfirefox

Creating a button with multiple background gradients using CSS

When working on a button element that already boasts a gradient effect, my aim was to integrate a small play image directly in the center. However, achieving this without compromising the current layout and ensuring compatibility across various browsers pr ...

htmlcssbuttongradient

Understanding fluid design concept

Check out this example. I've noticed that when resizing the viewport, the font size within the .main class increases while there is no change in the .aside class. Can someone help shed light on this for me? Thank you in advance! ...

cssliquid-layout

Selection tool for Material UI Fields

Is there a way to design something similar to this layout using Material UI? I'm looking to create a selection between fields. Any advice on how to achieve this in Material UI? ...

cssreactjsmaterial-ui

Tips for switching the irregular polygon shape image on click and hoverIf you want to change

I'm looking to create a unique menu with an irregular shape in Adobe Illustrator. I've attempted the following code: <div class="body_container"> <img src="img/sitio_Web.png" alt="" usemap="#sitio_Web_Map" height="787" bor ...

javascriptjquerycsshtmladobe-illustrator

What is the method for automatically scrolling down while hovering over an image?

How can I make it so that when an image is hovered over, it automatically scrolls to the bottom of the image? I have a couple of questions: How can I ensure the image scrolls to the end when hovered over? Currently, when I hover over the image, it doe ...

javascripthtmlcsshover

Angular HTML Component Refactor causes compatibility issues with BS4 classes

Currently, I am working on Angular components and I have a specific section that I would like to refactor into a separate component for reusability. Initially, when the HTML block with only Bootstrap 4 classes is placed in the parent component, the user in ...

angulartypescriptbootstrap-4angular6angular-components

Text that must always be centered

I'm having an issue with my match result page layout. The "VS" is not consistently centered and it's causing some weird display problems. How can I ensure that the "VS" is always centered? http://jsfiddle.net/3adhoker/ .result-in-month:nth-ch ...

htmlcss

Explore button that gradually decreases max-height

I have a "Show More" button that expands a div by removing the css attribute max-height, but I want to add an animation similar to jQuery's slideToggle() function to smoothly reveal the rest of the content. This is the code I am using: <div id="P ...

javascriptjqueryhtmlcss

Having trouble viewing a dynamically adjusting Angular NVD3 graph embedded in bootstrap

I have been utilizing the NVD3 library along with bootstrap 3.0 for my project. I have two divs with the classes "col-md-6 col-sm-12" positioned side by side. My goal is to showcase charts in both of these divs. To ensure that the charts are displayed corr ...

javascripthtmlcssangularjstwitter-bootstrap

Tips for reducing the height of the footer without compromising the alignment of the text within

My attempt to reduce the height of my footer in CSS using padding, margin, and other methods was unsuccessful. All of these adjustments either pushed the footer completely out of the bottom or left the text uncentered. footer { background: #fce138; wid ...

htmlcss

Is there a way to keep my navbar fixed at the top as I scroll down the page? And is it possible to have a picture appear above the navbar when scrolling up to the top?

I am looking to create a design where a picture appears above my navbar, and as I scroll down, I want the picture to stay fixed at the top so that it is always visible, regardless of how much I scroll. However, when scrolling back up, I want the picture to ...

htmlcssbootstrap-4navbar

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

A dynamic number of divs are generated from a data source. Each div contains an image button and another div with text. While the actual scenario is more complex, we can present a simplified version: <div id="main"> <div id="content_block_1" ...

javascriptjqueryhtmlcss

CSS animation fails to execute

I created a rotating carousel using CSS. The carousel is constructed using the 'ul' tag. To navigate left or right, I dynamically add a 'li' element to the left or right of the list by cloning the necessary value and appending/prependin ...

jquerycssjquery-pluginscss-transitionscarousel

What is the best way to remove the empty space on the right side of a webpage while ensuring it remains responsive?

I noticed that there seems to be some extra space on the right side of the layout. I'm not sure how to adjust the Bootstrap code or CSS to fix this issue, or if I need to apply margin 0 or padding 0 somewhere in the code. * { box-sizing: border-b ...

htmlcssbootstrap-5

Personalize your Django Form: Tailoring the appearance of fields

In my form class, I have various fields, including first and last name. My objective is to update the form in my HTML file to accept input and pass it into a model object without altering the display of the form. However, the issue arises when the fields a ...

htmldjangobootstrap-4django-templates

Effective Methods for Implementing CSS Variables within nth-child Selectors

Objective: To pass a variable successfully as a parameter to nth-child. The task is to make the third line turn green in the example provided. Dilemma: Currently, the parameter is being disregarded as a variable. Inquiry: Is achieving this possible? If s ...

css

the live binding feature fails to function properly once an append operation is executed

Could someone please explain to me why adding an even number of squares causes the bind event to stop working? $("#add").click(function(){ $("#container").append("<div class=\"square\">xxxxxx</div> ").bind("click",function(e) { ...

jqueryhtmlcss

Require assistance with arranging font-awesome icons in a stacked formation

After upgrading to the latest version of font-awesome, I encountered some stacking issues with my icons. In the previous version, everything was working perfectly. <li><span class="icon-stack stacked"><i class="icon-circle icon-stack-base" ...

cssfont-awesome