Steps to creating an elliptical border using CSS

Is there a way to apply CSS styles specifically to the left border of a div to achieve an elliptical shape, while keeping other borders normal? I've managed to create a semi-ellipse with the following code, but the rest of the border remains unchanged.

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

Here is the code snippet I used:

<html>
  <body>
      <div style="border-left: 5px solid #c8c6c4; border-radius: 3.5px; height:120px; border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid">
      </div>
  </body>
</html>

If anyone knows a way to achieve this effect in pure CSS, without adding extra elements, please share your insights. Thank you!

javascripthtmlcss

Answer №1

To achieve a similar effect using only CSS, you can utilize a before pseudo element with specific width and height properties to mimic the appearance of the div.

div {
  height: 120px;
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  width: 5px;
  height: 100%;
  background-color: #c8c6c4;
  border-radius: 3.5px;
}
<html>

<body>
  <div>
  </div>
</body>

</html>

Answer №2

Expanding upon the existing responses:

div {
  height: 120px;
  width: 200px;
  position: relative;
  margin: 30px;
  border-top: 1px solid #c8c6c4;
  border-bottom: 1px solid #c8c6c4;
  border-right: 1px solid #c8c6c4;
  background: #eee;
}

div::before {
  content: '';
  position: absolute;

  left: -7.5px;
  width: 15px;
  top: -1px;
  bottom: -1px;
  background-color: #c8c6c4;
  border-radius: 15px;
}
<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 a unique bullet style using CSS

I've got a collection of student links that take users to their profiles, and I want to replace the usual circular bullet points with smiley faces. Each picture is 14x14 pixels in size. How can I use CSS to achieve this effect for the bullets? ul { ...

htmlcss

Performing HTTP requests within a forEach loop in Node.js

I have a collection of spreadsheets containing data that needs to be uploaded through an API. Once the data is extracted from the spreadsheet, I create individual objects and store them in an array. My initial approach involved iterating over this array, ...

javascriptnode.jsajaxasynchronousnpm

Exploring the proper syntax of the reduce() method in JavaScript

Here are two codes that can be executed from any browser. Code1: let prices = [1, 2, 3, 4, 5]; let result = prices.reduce( (x,y)=>{x+y} ); // Reduces data from x to y. console.log(result); Code2: let prices = [1, 2, 3, 4, 5]; let result = prices.red ...

javascriptecmascript-6

The unexpected blank space appearing beneath my website as a result of images and videos placed on the

There seems to be some random white space on my website between the main body elements and the footer. Interestingly, removing the cat image and videoplayer eliminates this white space. However, I don't want to remove them completely, so I'm tryi ...

javascripthtmlcss

What is the best way to submit updated data from an Angular form?

Currently, I have a situation where multiple forms are connected to a backend service for storing data. My query is whether there exists a typical angular method to identify which properties of the model have been altered and only send those in the POST r ...

javascriptangularjsangular-resource

Move the text to the following line if a horizontal scroll bar is visible using JavaScript/JQuery and CSS styling

I have a section with multiple div elements...how can I ensure that when there is horizontal scrolling in the section, the hidden divs shift to the next line? HTML <section id="a"> <div class="num"> <div class="num"> <div class="num" ...

javascriptjqueryhtmlcss

Showing a placeholder image in the absence of any image

I need help with displaying a default image when there is no uploaded image in the CMS. Here is the code I have so far: <li><img alt="" class="img-responsive" src=" <? if($artikel[0]['images'] == '' ...

phphtmlarrays

issue with replicated field

My code is working perfectly fine, as you can see here. Now, I am attempting to replace <input id="input1" /> with <div id="input1"> </div>. You can view my progress here. The issue lies in the IDs - they are meant to change from input1 ...

javascriptjqueryclone

manipulating session variables with javascript ajax and php

I'm struggling with setting and retrieving session variables using JavaScript code that calls PHP functions via AJAX. I want to access the returned session field in my JavaScript, but nothing seems to be working. Can someone take a look at my code and ...

javascriptphpajaxvariablessession

Is your JavaScript function failing to execute properly?

Within my script, I have defined two JavaScript functions: myFunction() and submitForm(). <script> var intervalID = 0; function myFunction(interval) { if(interval == 1) { if(intervalID != 0) { window.clearInterval(intervalID); in ...

javascriptjqueryajax

A basic webpage created using ASP.NET featuring simple HTML text

Is it acceptable to manually code HTML, such as <p>, <ul>/<li>, <h3>, <h4>, <blockquote> tags, into a Content Page that already has an existing Master Page? The content is similar to a blog post. Are there better desig ...

asp.nethtml

Insert multiple text box values as a new entry in an SQL database

Currently, I am implementing a code snippet to incorporate additional text boxes within a form. The main purpose is to enable users to input multiple languages they are proficient in. <script> jQuery(function($) { var i = 0; ...

javascriptphpjquerysqlajax

$injector encountered a problem resolving the required dependency

Currently, I am attempting to adopt the LIFT protocol (Locate, Identify, Flat, Try(Dry)) for organizing my Angular projects. However, I am encountering difficulties in handling dependencies from other files. Here is the factory I have: (function () { ...

javascriptangularjs

Is it possible to switch out all instances of "GET" methods with "POST" throughout the codebase?

While working on a web application, we encountered caching issues with Internet Explorer (caching occurred due to the use of GET requests). The problem was resolved when users turned on "Always refresh from server" in IE's Developers Tool. Although we ...

javascriptajaxxmlhttprequest

"Executing the command 'npm run dev' is successful, however, the command 'next dev' does not yield the expected result

Trying out Next for the first time using npx create-next-app, but running into issues with the scripts. While npm run dev works without any problems, executing next dev gives me an error saying zsh: command not found: next. Any idea why this is happening? ...

javascriptreactjsnpmnext.js

Using AngularJS to handle click events and blur events

I am attempting to dynamically change the class based on user interaction in my code. The class should switch between "large" and "active" depending on whether the input field is filled or not. Please see the modified script below. <div class="snippe ...

javascripthtmlcssangularjs

Enhancing the Value of BehaviorSubject with Object Assign in Angular using Typescript and RxJs

I have a user object stored as a BehaviorSubject which is being observed. I need help figuring out how to detect if a specific value within my user object has changed. I've noticed that my current implementation doesn't seem to work correctly, a ...

javascriptangulartypescriptrxjsobservable

Issue with Vue 2 emitting events and not properly executing associated method, despite correct setup

I am attempting to trigger an event from a child Vue component to its parent using this.$emit('collapsemenu'). However, when I try to capture this event in the parent using v-on:collapsemenu="collapseMenuf($event)", nothing seems to ha ...

javascriptvue.jsvuejs2

Displaying subsets of data based on the identifier of the primary array

In my JSON file, I have an array containing various categories and their respective subcategories. { "Women": [ { "id" : 1, "name" : "See All", &q ...

javascriptarraysreactjsjson

Tips for creating a seamless Bootstrap collapse effect

I have noticed a slight flicker in the content collapse when using this code. Is there a way to make it collapse more smoothly? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script ...

javascripthtmlcsstwitter-bootstrap