Creating a stylish border for a div element

Having trouble with styling a border around a div box.

I'm struggling to find a way to prevent the borders from looking like this:

Let me show you an example of what I'm dealing with:

.num.num_1 {
  border-left-color: #0D2431;
}
.num {
  width: 60px;
  height: 60px;
  line-height: 50px;
  border-width: 5px;
  font-size: 40px;
}
.num {
  float: left;
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  border: 2px solid #eee;
  font-size: 20px;
  color: #0D2431;
  background-color: #fff;
}
div {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
}
<div class="num num_1">1</div>

htmlcss

Answer №1

.num.cheat:before {
    content:"";
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;

}
.num_1:before {
    border-left: 5px solid black;
}
.num_2:before {
    border-left: 5px solid black;
    border-top: 5px solid black;
}
.num_3:before {
    border-left: 5px solid black;
    border-top: 5px solid black;
    border-right: 5px solid black;
}
.num_4:before {
    border-left: 5px solid black;
    border-top: 5px solid black;
    border-right: 5px solid black;
    border-bottom: 5px solid black;
}
.num {
  width: 60px;
  height: 60px;
  line-height: 50px;
  border-width: 5px;
  font-size: 40px;
  position: relative;
  margin-right: 10px;
}
.num {
  float: left;
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  border: 5px solid #eee;
  font-size: 20px;
  color: #0D2431;
  background-color: #fff;
}
div {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
}
<div class="num num_1 cheat">1</div>
<div class="num num_2 cheat">2</div>
<div class="num num_3 cheat">3</div>
<div class="num num_4 cheat">4</div>

I made some adjustments to the CSS code provided by you. I used the :before pseudo element to achieve the desired result.

Answer №2

For an even more streamlined approach, consider utilizing box-shadow to achieve the desired effect without adding any additional elements.

Check out: http://jsfiddle.net/yb8r9vz6/4/

.num {
  border-left: 0px;
  box-shadow: -5px 0 0 0 #0D2431;
}

Answer №3

If you want to get creative, try creating a series of nested divs with different styles:

.custom-box {
    background: blue;
    padding: 15px;
    display: inline-block;
}
.custom-border {
    padding-left: 20px;
    background: gray;
    display: inline-block;
}
.inner-content {
    background: yellow;
    height: 120px;
    width: 120px;
}
<div class="custom-border">
    <div class="custom-box">
        <div class="inner-content">1</div>
    </div>
</div>

Answer №4

Simply include the following CSS code to achieve a square shape using Pseudo Elements, eliminating the need for extra divs in the HTML structure:

.num.num_1:before {
content: "";
position: relative;
display: block;
top: -5px;
left: -5px;
height: 5px;
width: 5px;
background: black;
}

.num.num_1:after {
content: "";
position: relative;
display: block;
bottom: 0px;
left: -5px;
height: 5px;
width: 5px;
background: black;
}

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

Resetting the quiz by utilizing the reset button

Hello everyone, I'm new to this platform called Stack Overflow. I need some help with my quiz reset button. It doesn't seem to be working as intended. According to my code, when the reset button is clicked at the end of the quiz, it should bring ...

javascripthtml

Tracing a path with a snapping motion using my thumb

Before we begin, let's take a look at the example below. The functionality of this component should mimic that of an input type range. However, I am facing some challenges in calculating the step value and snapping the thumb onto the trail based on t ...

javascripthtmlreactjsvue.jsdom-events

Is it possible to access the ID element of HTML using a variable in jQuery?

I have fetched some data from a JSON ARRAY. These values include Value1,Value2, and Value3. Additionally, I have an HTML checkbox with an ID matching the values in the array. My goal is to automatically select the checkbox that corresponds to the value re ...

javascriptjqueryhtmljsoncheckbox

The CSS class is not properly implemented in the React component

I value your time and assistance. I have spent many hours trying to solve this issue but seem unable to reach a resolution. Here is the React component in question: import styles from './style.scss'; class ButtonComponent extends React.Compone ...

javascriptcssreactjswebpackreact-boilerplate

Using arrays to pass parameters in JavaScript

I have multiple sliders that require the same set of parameters to be passed to each one. My understanding is that I need to use an array for this purpose. However, as a JavaScript novice, I am unsure of the correct way to implement it. The parameters lo ...

javascriptjqueryhtmlarraysvariables

The `tailwind.min.css` file takes precedence over `tailwind.css` in my Nuxt

Having trouble configuring Tailwind to use a custom font without it overriding the tailwind.css file and not displaying the changes? https://i.stack.imgur.com/ExDCL.png Check out my files below. // tailwind.config.js const defaultTheme = require('ta ...

javascriptcssvue.jsnuxt.jstailwind-css

conceal the HTML code from the students

As an instructor of an HTML/CSS course, I often assign tasks that require students to replicate the design of a webpage. However, providing them with direct links to the page makes it easy for them to decipher my methods and simply copy the work. Furthermo ...

htmlcsspdf

What is the best way to ensure that my theme button changer has an impact on all pages throughout my website, not only on the

Looking for some help here - I've got a button that changes the theme/colour of my website, but it only seems to work on the homepage and not on any other pages. Anyone know how I can fix this issue? Here's the JavaScript code: $(document).ready ...

javascripthtmlasp.net

Implement a fadeout effect by using a timeout function that adds a class to the div element in

I implemented a loader on my webpage that animates for 3 seconds before a function kicks in to modify the styles and make it invisible. I am looking to add a fadeout effect when the 'waa' style is applied to the 'load' div. setTimeou ...

javascripthtmlcss

Coloring the Text on Buttons

After nearly 24 hours of practicing, I still can't seem to wrap my head around it. Can someone assist me in changing the button text color to white, while keeping everything else the same? //NAVIGATION //======================== .nav ul display: ...

htmlcss

The Challenges of CSS Specificity in Multiple Browsers

I am using this as an opportunity to learn, so I appreciate if you can refrain from telling me what not to do and instead help me understand the concepts. What I am trying to achieve here is comprehension. Here is a sample of CSS code: input[type="file"] ...

htmlcsscross-browser

Sometimes, the page-wide background in Internet Explorer doesn't load properly

Currently, I am working on a website that uses an image as the background for the entire site. Everything seems to be running smoothly in Firefox and Safari, but Internet Explorer is giving me some trouble. Sometimes the image fails to load at all, other t ...

htmlcss

Having trouble with Isotope masonry functionality

While experimenting with Isotope from , I tested the reLayout method using the provided example found at . I copied the css and js to my page () but encountered an issue where clicking on the first element caused all other elements to move to the first col ...

javascriptjquerycss

Use PHP to post videos or images online

I'm having trouble uploading videos or pictures to my server using PHP. Every time I try, I receive an error stating that the file name is empty. I don't understand why this is happening, as the code continues to run the script, displaying an err ...

phphtmlimagevideoupload

Tips and tricks for implementing vuetify tooltips within a list component

Looking for help with my code: <div id='app'> <v-app> <v-list-tile-content> <v-list-tile v-for="(item, index) in items" :key="item.id" > <v-list-tile-action> {{index+1}}. </v-list-tile-action> < ...

javascriptcssvue.jsvuetify.js

Include the <script> tag in the HTML code for an iframe without running it

Currently, I am working on an HTML code that involves memory for an Iframe. Interestingly, whenever I use the append function, it not only executes the code but also carries out its intended task. html = $(parser.parseFromString($("#EHtml").val(), "text/h ...

javascriptjqueryhtmliframe

Exploring the benefits of utilizing Scoped CSS for individual components within Next.js version 13

Switching from a Vue.js background to starting with Next.js, I want to scope my CSS for each component such as Navbar instead of using it inside Globas.css. Is there a way to achieve this? I am also utilizing the Tailwind CSS library. I attempted creatin ...

cssreactjsnext.jsvuejs3next.js13

Issues with CSS causing items to not line up in a single row

I'm currently working on an html/css page and trying to align the items of the agenda class in the same row, centered on the page. https://i.sstatic.net/8TjG8.png Here's the code I've been using: <html lang="en" xmlns="ht ...

htmlcss

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

javascripthtmlcss

Using Tailwind CSS to set the margin of an element at certain breakpoints is not functioning as expected

I attempted to customize the margin of a div element at specific screen sizes by using a {screen}: prefix, but it did not have the desired effect. Here is what I tried: <div className={'flex justify-center'}> <div className={'w-fu ...

csspluginsthemesnext.jstailwind-css