What is the method for squaring the sides of the top border?

Can the top border be squared (straightened) as shown in the image below?

https://i.sstatic.net/7GKhj.png

.nav.nav-tabs.custom-nav-tabs .nav-link {
    border-radius: 0px;
}

.nav.nav-tabs.custom-nav-tabs .nav-link.active {
    border-top: 2px solid green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<br/>

<ul class="nav nav-tabs custom-nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#activeAds" data-toggle="tab">Active Ads</a>
    <input type="hidden" class="tab-name" value="active ads">
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#inactiveAds" data-toggle="tab">Inactive Ads</a>
    <input type="hidden" class="tab-name" value="inactive ads">
  </li>
</ul>

csstwitter-bootstrapbootstrap-4

Answer №1

Borders always intersect at an angle, which means that the "diagonal" border cannot be removed if you have other borders present.

One alternative is to use a box-shadow instead, like this:

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

.nav.nav-tabs.custom-nav-tabs .nav-link {
  border-radius: 0px;
}

.nav.nav-tabs.custom-nav-tabs .nav-link.active {
  border-top: 0px;
  box-shadow: 0 -2px 0 0 green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<br/>

<ul class="nav nav-tabs custom-nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#activeAds" data-toggle="tab">Active Ads</a>
    <input type="hidden" class="tab-name" value="active ads">
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#inactiveAds" data-toggle="tab">Inactive Ads</a>
    <input type="hidden" class="tab-name" value="inactive ads">
  </li>
</ul>

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

The alignment of two elements is off in mobile display

Why aren't my two divs centered in mobile view? I am using Vuetify CSS flex helper justify-center to try and achieve it, but it doesn't seem to be working. Even when I use justify-sm-center, it still doesn't work. What am I missing? <v-co ...

cssvue.jsflexboxvuetify.js

"Resolving the Problem of a CSS Width Setting at 100

Encountering difficulties when using 100% in the container CSS. Referencing the attached image, you can see the RED background color displayed on the right side image. Below is the link to my CSS code on jsfiddle. Please review it and advise on the modifi ...

htmlcss

Steps for adjusting an image in a Bootstrap Carousel

Currently tackling a simple bootstrap Carousel for a school project. I've adjusted the max-height of the images to 400px but it seems like only the top part of the images is visible. I attempted to adjust the margins on the image, and even thought abo ...

csstwitter-bootstrap

flash beneath the div tag

There seems to be an issue with the orange box and navigation showing up behind the flash on our main site. Any suggestions on how to resolve this? This problem is specifically occurring in Google Chrome. -- I've tried adding a certain parameter, bu ...

cssflash

What is the method to change the state of Bootstrap 4 buttons in a mobile view without using CSS classes as a reference?

I have a simple example featuring a few buttons displayed in a basic modular popup. I am curious about how the state changes from active to inactive as I don't see any visible change in my code. Initially, I attempted to use custom JS to add an "acti ...

javascriptcssbootstrap-4

Steps for creating a horizontally scrollable bootstrap column

I need to create a horizontal scroll for the .right-col without wrapping the float-div elements. <main class="container-fluid"> <div class="row"> <div class="col-auto left-col"> This ...

bootstrap-4horizontal-scrolling

Applying ngClass to a row in an Angular material table

Is there a way I can utilize the select-option in an Angular select element to alter the css-class of a specific row within an Angular Material table? I have successfully implemented my selection functionality, where I am able to mark a planet as "selecte ...

htmlcssangulartypescriptmat-table

The challenge of handling overflow in IE9

I'm encountering an issue specifically in IE9 where a child div is not respecting the overflow:hidden property of its container div. The outlined blue div in the image represents the container with overflow:hidden. The goal is for the images to stay w ...

htmlcssinternet-explorerinternet-explorer-9overflow

Is it possible to maintain a div consistently visible at the top while scrolling using CSS?

Is there a way to ensure that a div remains visible at the top of the page when scrolling without using jQuery, but only using CSS? ...

css

Malfunctioning JavaScript timepiece

I am currently experimenting with using Raphael to create a unique clock feature on my website. My goal is to animate the seconds hand to mimic the movement of a traditional clock. Below is the code snippet I have implemented: window.onload = function( ...

javascripthtmlcssraphael

Image input not working in Internet Explorer

While the button displays correctly in Chrome and Firefox, it appears differently in IE: To address this issue in IE, you may need to make adjustments to the CSS styles specifically for that browser. One potential solution could involve creating a separat ...

htmlcsswordpressinternet-explorer

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

cssscrollbarhtml

Guide on inserting text within a Toggle Switch Component using React

Is there a way to insert text inside a Switch component in ReactJS? Specifically, I'm looking to add the text EN and PT within the Switch Component. I opted not to use any libraries for this. Instead, I crafted the component solely using CSS to achie ...

javascripthtmlcssreactjs

Personalizing the presentation of asp.net webforms code

Having recently entered the asp.net realm, I've been intrigued by the talk surrounding asp.net mvc and its superior ability to customize markup and css compared to webforms. Despite hearing that asp.net is easier to learn than asp.net mvc, I've o ...

asp.nethtmlcssasp.net-mvc

css subcategories - divs failing to meet css criteria

I am encountering an issue where my subclass is not working on DIV elements. While the CSS rules are able to match inline tags like span and a, they do not seem to work with div. Please refer to the example provided below: <style> .row { disp ...

csshtmlsubclass

In what way can I obtain CSS comments utilizing jQuery?

I am trying to figure out how I can access CSS comments that are included in an external stylesheet. In order to demonstrate, I have loaded a sample CSS using the following code: <link rel="stylesheet" type="text/css" media="all" href="test.css" /> ...

jquerycsscomments

AngularJS is designed to provide alternating colors specifically for the objects that are currently visible within the complete set

Within my angularjs application, I am working with the following JSON data: $scope.itemsList = { "busName": "ABC", "needsToHide": true, "num": 123 }, { "busName": "xyz", "needsToHide": false, "num": 567 ...

cssangularjsangularjs-ng-repeatng-classangularjs-ng-class

Customize Color of Bootstrap Tooltips

Is there a way to customize the appearance of BootStrap tooltips by changing the color and aligning the text to the left? I've tried various CSS modifications from different posts, but none seem to work. Any idea on how to alter the CSS of the tooltip ...

htmlcssbootstrap-4

Clicking to remove dotted borders

One common CSS solution to eliminate the dotted borders that appear when hyperlinks are clicked is as follows: a:active, a:focus, input { outline: 0; outline-style:none; outline-width:0; } Although this method effectively removes the unwanted ...

htmlcss

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

I'm currently in the process of applying for an Internship through this Internship Link One thing that caught my attention right away is the issue with uploading or pasting a cover letter. When attempting to upload or paste a cover letter, it redirec ...

javascripthtmlcssformsweb-inspector