Unable to apply border radius to one edge while using a standard border on the opposite edge

I'm having an issue with the right border not displaying correctly on an element that has border-radius settings on the left and bottom sides. How can I resolve this?

Take a look at the code snippet on CodePen:

body {
  background: red;
}

.item {
  margin-left: 10px;
}

.box {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  line-height: 10px;
  margin-left: -5px;
  display: inline-block;
  width: 300px;
  background: white;
}

.border {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
<div id="container">
  <div class="box border">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
</div>
htmlcssborderinlinedisplay

Answer №1

Instead of using negative margins to eliminate the space between inline elements, try setting the font-size to zero for the container and then resetting it for the box. This simple adjustment will resolve the issue automatically:

body {
  background: red;
}

.item {
  margin-left: 10px;
}

#container {
  font-size: 0; /* ADDED */
}

.box {
  font-size: initial; /* ADDED */
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  line-height: 10px;
  display: inline-block;
  width: 300px;
  background: white;
}

.border {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
<div id="container">
  <div class="box border">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
  <div class="box">
    <p class="item"> Origen</p>
    <p class="item"> Buenos Aires</p>
  </div>
</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

Creating an automated HTML tag for a form input

https://i.sstatic.net/ZBDk2.png Is there a plugin to create form inputs like the one shown above? How can I add this feature to my own website? I would like for every user input to automatically add the < br > tag. ...

phphtmlforms

A technique for horizontally centering an image while simultaneously ensuring that the bottom is pushed down, even at an unknown resolution, and maintaining center alignment if

Imagine a scenario where I have an image with unknown resolution. My goal is to horizontally center it, even if the window's width is smaller than the picture, while also adjusting the bottom of the window to match the height of this picture. Is ther ...

htmlimagecssbackground-position

When the browser window is minimized, the @media CSS will wrap to the bottom line

When the browser has a standard resolution, the layout looks like this: https://i.sstatic.net/tNR6X.png However, on smaller screens, it appears like this: https://i.sstatic.net/U3RnZ.png Is there a way to adjust the positioning of these blocks using @m ...

htmlcss

What steps do I need to take in order to establish a Custom WebLink and develop a page for persistent object

My vision is to develop a platform that automatically generates a unique link once a specific value is entered. For example, if the user inputs "Number of Players: 8," a custom link will be generated for the game master to share with the players. Upon acce ...

htmlasp.net

Issue with footer not properly aligning on the page's bottom

In my current project, I am utilizing both angularjs and node js for development. Within my index.html, the views are being called in the following manner: <div ng-include="'views/header/header.view.html'"></div> <div ng-view styl ...

htmlcssangularjsnode.jsng-view

Is it possible to run both the frontend and backend on the same port when using vanilla JavaScript for the frontend and Node.js for the backend?

Is it possible to run frontend and backend on the same port in Rest APIs if using vanilla JS for the frontend and Node.js for the backend? I've come across information on how to do this with React, but nothing specific to vanilla JS. Any insights on t ...

javascripthtmlnode.jsexpresshttpserver

What is the best way to apply CSS to an image within a list item that is within an unordered list nested inside a specific

I've encountered an issue in my html file related to a navigation bar situated at the top of my page. The code snippet that initiates this navigation bar is as follows: <div class="“topNav"> <ul> <li><img src= ...

htmlcss

Error: String cannot be used for function prepare()

Before posting this, please wait to ensure it's not a duplicate. I've conducted thorough research and attempted all solutions, but still unable to resolve the issue. I consistently receive the error message "Fatal error: Call to a member function ...

phphtmlmysqlphpmyadmin

Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

After some testing, I found that setting the cursor to cursor: pointer works perfectly fine. However, my goal is to use a custom image as a cursor. The image is saved in both my src and public folders, but I seem to be struggling with the syntax when using ...

javascriptcssreactjsmaterial-ui

Guide to linking a label to a checkbox without utilizing the "for=id" method

Below is the code snippet I am currently working with: <li><input type="checkbox" id="checkboxThree" value="Alergia3" ><label for="checkboxThree">Alergia 1</label></li> <li><inp ...

htmljquerycsscheckbox

Extracting data from HTML that dynamically updates with button click

I am working on extracting data from a webpage with a large table that displays 100 entries by default. At the bottom, there is a dropdown menu where you can select to show 200 entries or view all of them. Is there a way for me to automatically set the dr ...

javascripthtmlweb-scrapingweb-crawler

issue with border color staying the same when focusing

I've been struggling with changing the border on focus in my code. Despite trying various methods, nothing seems to be working. Can someone help me figure out what I'm doing wrong? <input type="text" spellcheck="false" data-placement="top" id ...

htmlcss

Discovering a hidden DIV beneath other DIVs without disrupting their visibility - a step-by-step guide

I have created four separate DIVs that divide the screen equally into quarters. Additionally, there is a full-screen DIV designated for canvas. My goal is to ensure that these DIVs do not overlap each other - meaning if a user clicks on a link within one ...

htmlcss

Achieving priority for style.php over style.css

Having trouble with theme options overriding default CSS settings in style.css. Here's what I have in my header.php: <link rel='stylesheet' type='text/css' media='all' href="<?php bloginfo( 'stylesheet_url&apo ...

phphtmlcsswordpress

Having trouble with links, imported templates, and selections not functioning properly post file reorganization?

After setting up my jQuery to import universal template files into various parts of my website, everything was running smoothly. However, once I restructured my filing system, things took a turn for the worse. Now, not only is my SELECT dropdown malfunctio ...

htmljquerydrop-down-menupathhyperlink

Adjust the width of the graphics on both sides of the text based on the length of the text content

Is there a way to center an H1 tag between two graphics using CSS or jquery/javascript? The width of the H1 text will vary depending on the page. The dot on the left should remain at the edge of the site, and the line should extend to meet the edge of the ...

javascriptjqueryhtmlcss

Utilize the display flex property within a nested flex container

I can't seem to get my link text centered both vertically and horizontally, it keeps aligning to the left. I was under the impression that using flex-based alignments would solve this issue. I have gone through the information on using a flex item as ...

cssflexbox

modifying variable values does not impact what is displayed on the screen

I'm currently facing an issue with AngularJS. I have two HTML blocks within an ng-repeat and I need to display one of them at each step. <div class="col-md-3" style="margin-top:80px" ng-init="checkFunction()"> <div id="left_group_stage"& ...

javascripthtmlangularjs

I am experiencing issues with my Ajax code where it is not successfully sending data to the server and

Can someone help me troubleshoot my PHP AJAX code? I am new to PHP and just getting started with learning AJAX. index.html: <html> <head> <script> function sendmessage(str) { var xmlhttp; if (window.XMLHttpRe ...

phphtmlajax

The controls for the Bootstrap carousel component do not have a clear appearance

Trying to implement a Bootstrap carousel component but facing an issue with the controls not appearing transparent like in the example provided in the Bootstrap documentation. Check out the code snippet: <div class="carousel slide" id="s ...

javascripthtmlbootstrap-5