Creating a seamless top border that remains unaffected by border radius

I'm currently working on mimicking the style of Google Calendar, and I've encountered an issue with the text input box. When clicked, it should look like this: https://ibb.co/6Hqrnt4

However, what I've created ends up looking like this: https://ibb.co/HprQ125

In my attempt, my code looked like this:

.element{
  border-radius: 2px;
  border: none;
  border-bottom: 2px solid;
}

You'll notice that in my version, the bottom border gets misaligned at the end. On the other hand, in Google Calendar's design, this doesn't happen. Although I acknowledge that the bottom border doesn't perfectly line up with the original grey box (zoom into the image), it isn't a major concern. How can I fix this issue?

htmlcssborder

Answer №1

To create a blue border effect, you can achieve it by adding a new element.

.grey-box {
  width: 100px;
  height: 50px;
  display: block;
  background-color: #f1f1f1;
  border-radius: 5px;
}

.blue-line {
   display: block;
   width: 100px;
   border-bottom: 5px solid blue;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
} 
<div class="grey-box"></div>
<span class="blue-line"></span>

Answer №2

My hunch is that the button may be situated inside a div that has a subtle bottom border and slightly rounded corners.

<div class="blue-line">
    <a href="#" class="grey-back">
</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

Tips for adjusting the close date based on the selected date in a dropdown datepicker

Here is a sample code snippet: <input id="date1" name="start_date" id="dpd1"/> <select class="form_line_only form-control" name="ho_night"> <option selected> 0 </option> <option ...

javascriptjqueryhtmldatepicker

How can I send an HTML document from a WebApi 2 action using the IHttpActionResult interface?

When it comes to building an html document and returning it in a web api, many resources recommend using HttpResponseMessage. However, I am eager to achieve this using IHttpActionResult instead. Here is my current approach: [ResponseType(typeof(HttpRe ...

c#html.netasp.net-web-api

Tips for incorporating a set offset while utilizing the scrollTop() function

I have successfully implemented a code that sets a position:fixed to a div when it scrolls past the top of the screen. The code I used is as follows: var $window = $(window), $stickyEl = $('#the-sticky-div'), elTop = $stickyEl.o ...

javascriptjqueryhtmlcsstwitter-bootstrap

The waveform's bottom appears distorted when using Bootstrap

I'm currently experimenting with creating a header wave in Bootstrap CSS using SVG shape. However, I encountered an issue when implementing bootstrap into the HTML code - my design resembles the second image instead of the desired look of the first on ...

htmlcsstwitter-bootstrapsvg

javascript Why isn't the initial click registering?

In my table, users can select certain rows by using checkboxes. I have implemented some JavaScript functionality that allows them to select each checkbox individually and also use a "Select All" option. Additionally, there is code written to enable the use ...

javascriptjqueryhtmlcheckbox

Adjusting the options in the subsequent dropdown menu based on the selection made in the initial dropdown menu

I am currently working on select boxes where values are dynamically added through an array. For example, if I have 4 values in the first select box, I only want to display 3 values in the second select box, excluding the value that has already been selecte ...

javascriptjqueryhtml

What is the reason for being unable to submit the value of an input that is disabled?

When I try to save the value of an input field that is disabled and has the required attribute, I receive an error message stating that "field_name is required". Why am I unable to insert a value when the input field is disabled? <input disabled type=&q ...

javascriptphphtmljquery

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

javascriptcsspopup

The alignment of elements on the right and left sides is not functioning as intended

I've been facing an issue with the alignment of my floats on my brand new website www.unicmedia.nl/case/oranje. Surprisingly, they seem to work fine in IE this time, but Firefox and Chrome are completely out of sync. Despite trying numerous solutions ...

htmlcss

Ways to display the chosen value based on the item's index using Javascript in Angular

If you want to view the complete code, just click on this link. I have identified the main issue here. Check out the code here: https://stackblitz.com/edit/test-trainin-2?file=src/app/app.component.html The problem is when you interact with the green bal ...

javascripthtmlangular

What is the best way to eliminate a class from a jQuery UI Dialog?

Can a specific class be removed from the jQuery UI dialog? http://api.jqueryui.com/dialog/#option-dialogClass I'm curious if there is a way to remove a particular class from the dialog. Thank you. ...

htmljquery-uijquery-dialog

I am interested in extracting information from a website by utilizing PHP

Can data be scrapped from a website using PHP without the use of any external tools? I attempted with the following code, but it proved to be insufficient: <?php $url = 'http://www.example.com'; $output = file_get_contents($url); echo $output ...

phphtml

Tips for making a fluid DIV expand to fit the entire width of the page

My layout features fixed-width sidebars on the left and right, with a fluid main content area that fills the space in between using float:left. Here's an example: #left-sidebar {width: 200px;} #right-sidebar {width: 300px;} #main-content {margin-left ...

htmlcsslayout

Can someone provide assistance on how to add an icon to a button?

Help needed with adding icons to buttons! I am new to coding and struggling with adding icons to each button. If any classes need to be changed, please let me know. I am currently learning HTML and CSS and could use some guidance. Thank you! Example: ...

htmlcss

When scrolling, the text or logo inside the navbar seems to dance with a slight wiggling or

I recently implemented a code to create a logo animation inside my navigation bar that expands and contracts as I scroll, inspired by the functionality of the Wall Street Journal website. However, this implementation has caused some unintended side effects ...

javascriptjqueryhtmlcss

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

javascripthtmlcssangularjsng-style

What's the best way to create a unique shape for a Bootstrap div?

Can someone assist me in configuring the bootstrap div col-xs-2 to match the layout shown in the images provided? Your help would be greatly appreciated! Thank you in advance. https://i.stack.imgur.com/afd0p.png https://i.stack.imgur.com/0BGum.png ...

htmltwitter-bootstrapcss

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

pythonjquerycssseleniumautomated-tests

Eliminate border around image link

I can't figure out what I'm doing incorrectly... I included some CSS code a:active {text-decoration: none; border: 0px solid black} a:link {text-decoration: none; border: 0px solid black} a:visited {text-decoration: none; border: 0px solid black ...

htmlcss

issues with redirection of form validation

I am currently working on a Django project where users can add comments to posts. The information is saved directly in the database, which is functioning properly. However, I am facing an issue where after submitting the comment, the form keeps resubmittin ...

pythonhtmldjangobootstrap-4