Is it possible to apply Border Radius exclusively to round the top of a div?

When applying the border-radius property on a div element with borders, it only affects the top corners. But why is that?

For example, you can check out this demo: https://jsfiddle.net/07tqbo56/1/

.asd {
        margin-top: 35px; 
        width: 123px;
        border-top-style: solid; 
        border-top-color: #1163b9; 
        border-top-width: 70px; 
        border-radius: 70px;
      }
<div class="asd"></div>

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

This screenshot shows how it appears on Firefox 72 in Ubuntu 19.

htmlcss

Answer №1

The reason behind this issue is that your remaining border properties are specifically targeting the top border only, like border-top-style should just be border-style.

In cases where only one border is set to solid, certain browsers may apply the border-radius property solely to that particular border, while others still apply it to all borders.

.asd {
  margin-top: 35px; 
  width: 123px;
  border-style: solid; 
  border-color: #1163b9; 
  border-width: 70px; 
  border-radius: 70px;
}
<div class="asd"></div>

Answer №2

It won't just appear this way in Firefox, the layout will look identical across all web browsers.

Are you attempting to achieve something like this?

All you need to do is remove "Top" from border-style, -color and -width. The "Top" attribute only affects the top portion of the design.

.xyz {
  margin: 15px; 
  width: 87px;
  border-style: solid; 
  border-color: #543210; 
  border-width: 20px; 
  border-radius: 50%;
}
<div class="xyz"></div>

I believe this should resolve your issue.

Answer №3

Explanation of CSS syntax:

.asd {
  margin-top: 35px; 
  width: 123px;
  border: 70px solid #1163b9;
  border-radius: 70px
}
<div class="asd"></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

How can I retrieve the content from an iframe whenever its state is altered using jQuery?

I am currently working on a project where I need to extract the content from a hidden iframe and display it as HTML in a div every time the iframe changes its loading state. The goal is for it to appear as if the page is being redirected and downloading it ...

javascriptjqueryhtmliframe

Converting Milliseconds to a Date using JavaScript

I have been facing a challenge with converting milliseconds data into date format. Despite trying various methods, I found that the solution provided in this link only works for a limited range of milliseconds values and fails for higher values. My goal is ...

javascripthtmldatedatetime

HTML5 Slideshow with Smooth Image Transitions

So, I have created an HTML5 image slideshow and it's working perfectly on my localhost. However, I am puzzled as to why there is no transition effect within the slideshow. I was expecting something like fading out the first picture and then having the ...

javascripthtmlcssslideshowtransition

What steps should I take to eliminate the black border around my input fields?

I recently noticed that there are black boxes around the input area on the form I am creating. Is there a way to remove them? I am using bootstrap, so I'm not sure if that is causing the issue. Any suggestions would be greatly appreciated! https://i.s ...

htmlcssbootstrap-4

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I have a collection of 24 buttons, all in a dark grey (#333333) shade. Whenever I click on one of the buttons, it changes to a vibrant blue color (#0099ff), which is functioning correctly. However, when I proceed to click on another button, the previous ...

javascriptphphtmlcss

Tips for keeping the menu open even when you're not hovering over it with your cursor

I put together a stylish drop-down menu based on some web examples, but my manager pointed out that it can be inconvenient to use because the menu closes when the mouse moves off of it. I've tried various workarounds as outlined here, but none have in ...

htmlcss

What is the best way to design a div that includes two separate columns for text and an image icon?

Check out this code: <?php foreach ($data as $vacancy) { ?> <div class="vacancy"> <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" /> <div class="name"> < ...

htmlcss

Create a dynamic effect by adding space between two texts on the page

const Button = () => { const options = ['test1', 'test2', 'test3']; return ( <div style={{ position: 'absolute', left: '8px', width: 'auto', flexDirection: 'row' ...

javascriptcssreactjsarrays

The background image is not displaying properly within a <span> tag

I am attempting to show a smiley icon within a span tag that is nested inside a list item. Below is the code snippet: <p> It contains various tabs:{" "} <li> Home - Showcase and brief informati ...

htmlcssreactjsstyles

Create text that remains hidden behind an image while ensuring the content stays fully

In my website design using HTML/CSS, I am working on achieving a specific layout goal: https://i.sstatic.net/6UUwK.png My aim is to have a div of text positioned behind an image. Although I have successfully accomplished this on a laptop screen, I am fac ...

htmlcsslayout

The properties of JavaFX in the CSS file are not recognized by Eclipse, showing an error message as "unknown property"

After installing Eclipse and downloading the OpenJFX SDK, I encountered an issue where Eclipse marked all -fx- properties in the .css file as warnings with the message "unknown property". Surprisingly, my JavaFX projects still compiled and ran smoothly, ...

javacsseclipsejavafxefxclipse

What is the best way to adjust the dimensions of an element so that it only fills the size of the initial window or

I need help keeping a specific element at the initial 100% height of the viewport, without it resizing when the user changes their window size. Should I use JavaScript to determine the initial viewport height and then pass those dimensions to the CSS? Can ...

htmlcssviewport

`javascript pop up notification will only display one time`

I am currently developing a chrome extension with two different modes. When the user clicks on the icon, a pop-up message should appear to indicate which mode is active. However, I am facing an issue where the message does not always display when the pop- ...

javascripthtmlgoogle-chrome-extensionpopup

The BG column image is not stretching to full height

I am facing an issue with my website layout where the left column has a background image and another background image is set for the body to fill the rest of the screen. The content area on the right extends vertically beyond the browser window height. How ...

htmlcss

The update of a div is not occurring with a JQuery mobile Ajax request

I'm working with a div named Tickets and two buttons labeled 'open' and 'dicht'. When I click on either button, a function called getTickets(status) is triggered with the status of open or dicht. The data retrieval seems to be wor ...

htmlajaxjquery-mobile

Ways to Conceal/Deactivate Information in HTML

Welcome to my website mycareerpath.co.in. I am looking to remove the "FREE DOMAIN + 1GB HOSTING" from my site. Can anyone provide guidance on how to do this? Important Reminder Please remember to right click and inspect the page source for more informati ...

phpjavascriptjqueryhtmljsp

Generate a custom image using a pre-existing background image and text using JavaScript, then save it as a JPEG file in

Managing multiple fanpages on Facebook can be quite a task, especially when it comes to posting images with funny text. I have different backgrounds for each page, which means I have to save each image individually with the text. To streamline this process ...

javascriptphpjqueryhtmlphp-gd

How to use jQuery to recursively assign numbered classes to groups of div elements

I am dynamically grouping a fixed number of divs from an array (e.g. 4 in each group). The total number of .item divs retrieved from the array is uncertain... I need to recursively assign the same class to these groups of wrapped divs: <div class="wrap ...

jqueryhtmlclassaddition

Execute the button click function repeatedly at specific time intervals using Javascript

I have a submit button on my page that uses the POST method to send a value. <button id="log" class="btn bg-purple" formmethod=post value="2" name="start" formaction=start_server.php>Get Log</button> Clicking this button retrieves a log file ...

javascriptphpjqueryhtml

Retrieve text from a dropdown menu while excluding any numerical values with the help of jQuery

I am currently implementing a Bootstrap dropdown menu along with jQuery to update the default <span class="selected">All</span> with the text of the selected item by the user. However, my objective is to display only the text of the selected it ...

javascriptjqueryhtmldrop-down-menu