Here is the CSS code I am using:
border: 2px solid #00ff60;
outline: 1px solid #000;
outline-offset: 0px;
This is how it looks:
https://i.sstatic.net/SuvU1.png
Is there a way to modify it so that it includes an inner black border, similar to the one at the bottom?
EDIT: Apologies for forgetting to mention, I want to apply this style to an image.
Consider implementing the box-shadow property for achieving the desired effect. Another approach is to use multiple box-shadow values:
.box {
border: 5px solid #00ff60;
outline: 5px solid #000;
outline-offset: 0px;
height: 100px;
width: 100px;
box-shadow:0px 0px 0px 5px #000 inset;
display:inline-block;
}
.box-alt {
border: 5px solid #000;
outline: 5px solid #00ff60;
outline-offset: 0px;
height: 100px;
width: 100px;
box-shadow:0px 0px 0px 10px #000;
margin:10px 20px;
display:inline-block;
}
.box-alt-2 {
height: 100px;
width: 100px;
box-shadow:0px 0px 0px 5px #000,
0px 0px 0px 10px #00ff60,
0px 0px 0px 15px #000;
margin:10px 20px;
display:inline-block;
}<div class="box">
</div>
<div class="box-alt">
</div>
<div class="box-alt-2">
</div>You can also accomplish a similar result by utilizing multiple background layers and linear gradients:
.box {
height: 100px;
width: 100px;
background:
linear-gradient(#fff,#fff) center/calc(100% - 20px) calc(100% - 20px),
linear-gradient(red,red) center/calc(100% - 15px) calc(100% - 15px),
linear-gradient(#000,#000) center/calc(100% - 10px) calc(100% - 10px),
linear-gradient(green,green) center/calc(100% - 5px) calc(100% - 5px),
linear-gradient(#000,#000) center/100% 100%;
background-repeat:no-repeat;
}<div class="box">
</div>Take a look at this demo When you click on the "next" button, new images are loaded from the internet. In my application, all the images are stored in the img/image folder with names like 1.jpg, hi.png, etc. My question is, how can I display these image ...
Would it be wise to utilize the <sup> tag instead of using margin-top: -xnumberofpx for indicating required fields in a form? <label for="address1" required>Address line 1<sup><img src="/src/images/requiredAsterix.png" width="10" heig ...
I'm currently trying to create a pure CSS dropdown menu on hover by following this tutorial. However, despite multiple attempts, I'm still stuck and in need of some clear explanations for my issue. <div class="navbar"> ...
I'm looking to make some changes to an HTML file within the doGet() function before it's output in HTMLOut. However, I'm running into an issue with the <?!=include('css').getContent();?> code snippet, as it can't be exec ...
Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...
I am looking to achieve a layout where the top div is fixed at the top of the screen and the second div is scrollable below it. Both divs should have the same column width. I attempted to use position: fixed, but the columns are not aligned directly benea ...
Is there a way to change the border color of a select component in Material UI library without directly setting the property in inspect elements? I can see it working when I set the property that way, but how can this be achieved using class override? htt ...
Let's say there is a div element on the page like this: <div class="center"></div> The CSS style for this div may look something like this: .center{ background:red; position:absolute; left:50%; top:50%; margin-left: ...
I have limited experience in programming and I'm attempting to edit a .php file within a Wordpress theme. Please keep this in mind as I explain my issue. Within the theme, there is code that calculates the average score from 1 to 10 and then displays ...
Can someone help me troubleshoot why my images are not displaying in the slider on my homepage? I have set up the slider using React Slideshow Image, but the images are not showing up for some reason. I am also wondering if anyone knows of any full-screen ...
Looking for a way to select all elements with the class .tab-pane except for those with the id #home. I attempted using .tab-pane:not#home{...}, but it proved unsuccessful. Any ideas on how to achieve this? Sample HTML <div id="home" class="tab-pan ...
My challenge is to consistently position a textfield and a button side by side. The requirement is for the button to always be on the right side of the screen, while the textfield should take up the remaining width on the left side. I initially tried setti ...
I'm intrigued by the layout shown in the image attached. My attempts to recreate it using a combination of columns and rows have been unsuccessful. Could it be that I'm going about this the wrong way? ...
As I try to replicate a happy accident of mine, which originally occurred during my first attempt at CSS: I was just randomly adding selectors when I stumbled upon this unique layout. However, as I proceeded with rewriting the file, I failed to save the o ...
In a React component that I've developed, I have utilized ResizeObserver to track its own width. Within this component, two divs are rendered with each having a "flex: 1" property to ensure equal width distribution. Under certain conditions, such as w ...
I'm struggling to add a border to a div using Bootstrap 4. When I try using only the border property, it looks strange, and when I use other properties, no border appears. Here is the code snippet: I even tried with the beta 2 version. If there is s ...
Problem I encountered an issue with my projects that are both using the bootstrap-datetimepicker. While one project displays the correct color, as seen here, the other project shows a wrong color, shown here. Below is the HTML code snippet I am working wi ...
Recently, I took a responsive website template and converted it into an ASP.NET MVC app. However, I've encountered some peculiar behavior when resizing the browser window. As the width of the window decreases below 986 pixels, a mysterious white "spac ...
I've encountered an issue where my child's ul li elements are not behaving as expected, despite following advice from other sources. After days of debugging with no success, I am unable to pinpoint the problem. The image showcases the issue perfe ...
Can the monospace font in Angular Material be customized for just the <code>foo</code> blocks? I want to use a font where the number zero 0 looks distinct from the letter oh O. ...