I'm trying to achieve a border-top of 20px solid red;, with rounded corners at the bottom. However, the code I have tried doesn't seem to be working for me.
-moz-border-radius-bottomright: 12px 12px;
border-bottom-right-radius: 12px 12px;
-moz-border-radius-bottomleft: 12px 12px;
border-bottom-left-radius: 12px 12px;
Any suggestions on how I can make this work?
It is puzzling why the desired outcome is not being achieved, as the code above appears to be accurate. I have included a JS Fiddle example that demonstrates the correct functionality. It seems likely that you may have added the border-top property incorrectly to the box. Additionally, it is unnecessary to include two values for each border-property. I hope this clarification helps address any issues.
To create a new layer object with an ID of box, simply apply the following CSS. If you insert a paragraph within the box, the border will not display as expected.
http://jsfiddle.net/brownlace/kEvrE/1/embedded/result/
/* css3 rounded corners */
#box {
border-top: 20px solid red;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
}
To ensure that the property is applied to all borders, I recommend using the border property instead of border-top.
border: 20px solid red;
If both values are the same, you can simplify by using border-bottom-left-radius: 12px;.
For compatibility with webkit browsers, consider adding the following vendor properties:
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
Check out this JSFiddle link for a demonstration.
I am working on a project where I need to create a grid of 16 audio files with separate links for each in HTML, CSS and JavaScript. Each box in the grid should link to a different audio file. My initial thought was to use a table to achieve this, so I cre ...
Currently, I'm tackling a project with Vuejs and Laravel. There's a tooltip directive incorporated that relies on Bootstrap's functionality. Check it out below: window.Vue.directive("tooltip", function(el, binding) { // console ...
Check out my webpage at I'm trying to vertically center an image using the bootstrap carousel. The issue I'm facing is that I want the image to be displayed in its original size, but centered on the page. Here's the code snippet: <sty ...
Is it possible to make the last letter of a word appear red using CSS? <asp:Label ID="QuestionText" runat="server" CssClass="asterisk"></asp:Label> .asterisk:after { color: Red; content: " *"; } The challenge arises from the fact tha ...
Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: https://i.sstatic.net/xvIpE.png To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF us ...
Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbo ...
Why does the filter invert not work in Internet Explorer (IE)? <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> </script> <sty ...
I am working with HTML code that looks like this: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="border d-flex align-items-baseline m-2 p-2" style="width: 400px"> < ...
I am attempting to implement an interesting effect on my website where clicking a thumbnail causes a full-size div to "zoom in" from the thumbnail. My initial strategy involved using CSS and jQuery, setting the full-size div to position:absolute with top a ...
I seem to have forgotten my CSS skills, but I am facing an issue. Here is the code snippet: <div class="footer_container"> <div class="website_logo_to_footerexpand"></div> <div class="info_cont"> <div class ...
I have a table where I want to include a vertical-align property: $output = '<style type="text/css">div.bar-container {border: 1px solid #ccc; width: 150px; margin: 2px 5px 2px 17px; padding: 3px; float: left; background: white; position:relati ...
I've been wondering about the popularity of 3 column flow layouts compared to using a table with 3 columns and one row. Can someone explain the advantages and disadvantages of using a flow layout versus a table layout for this scenario? Thank you ...
Is it possible to set an element's height using CSS to match the window inner height without directly modifying its style with JavaScript? Can this be achieved by changing a CSS class with JavaScript? One attempted solution involved: document.getEle ...
I am currently developing a tree view folder structure. Here is the code snippet I am working with: Code: package Selenium_Practice; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.o ...
Within my application, I have implemented a login feature in the navbar component. However, I am encountering an issue with updating a variable in the main component upon successful login. Although I have successfully managed to set up the login functional ...
I'm new at this, so please forgive me if my question sounds naive. I've been struggling with this issue the whole day. I'm working on a student project: https://codepen.io/kremlevmax/pen/EomEyb Here is the HTML: <body> <div ...
I have two classes (firstCircle & spin) on the first circle on the left, and I'm attempting to make it rotate in place. After removing them from the css so you can see the circle, I am having trouble with transform-origin. My code seems wrong as i ...
Is there a way to incorporate a slide effect in order to reveal my hidden div? function toggleInfo() { var info = document.getElementById("info"); if (info.style.display === "none") { info.style.display = "block"; } else { ...
I am trying to display two icons side by side using HTML code. Here is what I have: <head> <style> .icon_one{ width:25px; height: 20px; background:#ffffff url('icon_one.jpg') no-repeat right top; } .icon_two{ width:2 ...
How can I create a JavaScript function that displays a random word from a list when a button is clicked and prints it in a heading 3? I would appreciate a quick response. //Start of Js code let display = document.getElementById("motivato"); console.log(di ...